css3 transform简介 3D

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 轴上的旋转

扫描二维码关注公众号，回复： 3938857 查看本文章

旋转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)

参数说明

参数不允许省略。