3D变换,3个属性
- transform-style: prevserve-3d ;建立3D空间，必须是父元素,运动的元素没法建立
- perspective:数字 景深
- perspective-origin 景深基点: 视线是从哪个方向看过去的
- transform : 新增函数
- rotateX() 旋转X轴 类似单杠
- rotateY() 旋转Y轴 类似钢管舞
- rotateZ() 旋转Z轴 类似水平翻转
- translateZ() 位移Z轴，简单来说就是近大远小
- scaleZ() 放大
这里特别提醒用了3D空间必须加相对定位
围绕X轴旋转
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>3D旋转</title>
</head>
<style>
*{margin:0px;padding:0px;}
h1{margin:10px auto;position:absolute;left:50%;top:0px;-webkit-transform: translate(-50%,0);}
div{width:100px;height:100px;padding:100px;border:10px solid black;-webkit-perspective: 50px;-webkit-transform-style: preserve-3d;}
p{width:100px;height:100px;background:red;transition: 2s;}
div:hover p {
-webkit-transform: rotateX(180deg);
}
</style>
<body>
<h1>鼠标放到框子上面就会变形</h1>
<div>
<p>
</p>
</div>
</body>
</html>
效果图
围绕X轴旋转.gif
绕Y轴旋转
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>绕Y轴旋转</title>
</head>
<style>
*{margin:0px;padding:0px;}
div{width:100px;height:100px;padding: 100px;border:10px solid blanchedalmond;-webkit-transform-style: preserve-3d;-webkit-perspective: 100px;margin:0 auto;}
p{width:100px;height:100px;background:red;transition: 2s;line-height:100px;text-align:center;}
p span{transition: 1s;}
div:hover p{-webkit-transform: rotateY(180deg) ;}
div:hover p span{-webkit-transform: rotateY(-180deg) ;display:block;}
</style>
<body>
<div>
<p>
<span>2</span>
</p>
</div>
<!--小提示要是里面的文字不转的话可以给里面的文字设定一个包裹层这样也旋转了-->
</body>
</html>
效果图
围绕y轴旋转.gif
绕Z轴旋转
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>TranslateZ</title>
</head>
<style>
*{margin:0px;padding:0px;}
div{width:100px;height:100px;padding:100px;margin:0 auto;border:10px solid #ccc;-webkit-perspective: 100px;-webkit-transform-style: preserve-3d;}
p{width:100px;height:100px;background:red;transition: 2s;}
div:hover p {-webkit-transform: translateZ(-100px);}
</style>
<body>
<div>
<p>
1
</p>
</div>
</body>
</html>
效果图 近大远小
围绕Z轴旋转.gif
