css 3d 转换
rotate3d() , translate3d() , scale3d() , perspective()
三个方向:
旋转 rotateX
X轴上的旋转
语法
transform: rotateX(<angle>)
真的是以元素中心为原点的绕x 轴旋转效果哇!
<style type="text/css">
div {width: 800px; height: 250px; background: #abcdef; margin:auto;}
div > img {
transform: scale(0.3,0.3) rotateX(10deg);
}
</style>
同理rotateY,rotateZ
Y ,Z 轴上的旋转
旋转rotate3d
语法
transform: rotate3d(x,y,z,angle)
参数说明
前3个表示旋转方向x,y,z,第4个参数表示旋转的角度,参数不允许省略。
前3个参数有0 与 非0 的区别。0代表该方向不旋转,非0 代表该方向旋转。
非0 值大小与旋转的角度大小相关。
移动 translateZ
对象在Z 轴平移
语法
transform: translateZ(z)
移动 translate3d
语法
transform: translate3d(x,y,z)
参数说明
参数不允许省略。
<style type="text/css">
div {width: 800px; height: 250px; background: #abcdef; margin:auto;}
div > img {
transform: scale(0.3,0.3) rotateZ(10deg) translate3d(200px,200px,200px);
}
</style>
缩放 scaleZ
指定对象的z 轴缩放
语法
transform: scaleZ(z) [看不出变化]
缩放 scale3d
语法
transform: scale3d(x,y,z)
参数说明
参数不允许省略。