CSS3 transform变形（3D转换）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一.三维坐标

空间中三维坐标如下图所示：

向上为-Y，向下为+Y，向左为-X，向右为+X，向前为+Z，向后为-Z。

二.perspective(n)为 3D 转换元素定义透视视图

perspective的中文意思是：透视，视角。

没有透视定义，不成3D。

下图为透视的一张图：

CSS3中3D transform的透视点是在浏览器的前方！

需要设置该元素或该元素父辈元素的perspective大小。

perspective(n)定义视点离屏幕的距离。

三.translate3d(x,y,z)，translateX(x)，translateY(y)，translateZ(z)定义3D平移转换

1.translate3d(x,y,z)定义3D平移，x,y,z分别为移动的位移。

如下代码中，设置父元素的perspective( )为1000px，x,y,x值分别设置为100px,100px,100px。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style type="text/css">
.father{
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
div
{
width:120px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
-webkit-transform:translate3d(100px,100px,100px); /* Safari and Chrome */
-moz-transform:translate3d(100px,100px,100px); /* Firefox */
transform:translate3d(100px,100px,100px);
}
</style>
</head>
<body>
<div class="father">
<div>ORIGINAL</div>
<div id="div2">TRANSFORMED</div>
</div>
</body>
</html>

效果如下图所示：

2.translateX(x)，定义平移转换，只用X轴的值。

如下代码中，设置translateX( )值为100px。

div#div2
{
-webkit-transform:translateX(100px); /* Safari and Chrome */
-moz-transform:translateX(100px); /* Firefox */
transform:translateX(100px);
}

效果如下图所示：

3.translateY(y)，定义平移转换，只用Y轴的值。

如下代码中，设置translateY( )值为100px。

div#div2
{
-webkit-transform:translateY(100px); /* Safari and Chrome */
-moz-transform:translateY(100px); /* Firefox */
transform:translateY(100px);
}

效果如下图所示：

4.translateZ(z)定义平移转换，只用Z轴的值。

定义translateZ( )，必须要先定义perspective值，否则没有效果。

translateZ( )的功能就是让元素在自己的眼前或近或远。

设置的translateZ( )值越小，则子元素越小（因为元素远去，我们眼睛看到的就会变小）,translateZ( )值越大，该元素也会越来越大。

translateZ( )值接近于perspective值时，该元素的大小就会撑满整个屏幕。

如下代码中，设置父元素的perspective( )为1000px，translateZ( )值为120px。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style type="text/css">
.father{
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
div
{
width:120px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
-webkit-transform:translateZ(120px); /* Safari and Chrome */
-moz-transform:translateZ(120px); /* Firefox */
transform:translateZ(120px);
}
</style>
</head>
<body>
<div class="father">
<div>ORIGINAL</div>
<div id="div2">TRANSFORMED</div>
</div>
</body>
</html>

效果如下图所示：

四.rotate3d(x,y,z,angle)，rotateX(angle)，rotateY(angle)，rotateZ(angle)定义3D旋转

1.rotate3d(x,y,z,angle)定义3D旋转。

x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；

y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；

z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；

angle：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值表示元素顺时针旋转，为负值表示元素逆时针旋转。

如下代码中，设置x,y,z均为1，angle为30deg。

div#div2
{
-webkit-transform:rotate3d(1,1,1,30deg); /* Safari and Chrome */
-moz-transform:rotate3d(1,1,1,30deg); /* Firefox */
transform:rotate3d(1,1,1,30deg);
}

效果如下图所示：