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。

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>CSS3</title>
6    <style type="text/css">
7        .father{
8            -webkit-perspective: 1000px;
9            -moz-perspective: 1000px;
10            perspective: 1000px;
11        }
12        div
13        {
14            width:120px;
15            height:75px;
16            background-color:red;
17            border:1px solid black;
18        }
19        div#div2
20        {
21            -webkit-transform:translate3d(100px,100px,100px); /* Safari and Chrome */
22            -moz-transform:translate3d(100px,100px,100px); /* Firefox */
23            transform:translate3d(100px,100px,100px);
24        }
25    </style>
26</head>
27<body>
28<div class="father">
29<div>ORIGINAL</div>
30<div id="div2">TRANSFORMED</div>
31</div>
32</body>
33</html>

效果如下图所示：

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

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

1  div#div2
2        {
3            -webkit-transform:translateX(100px); /* Safari and Chrome */
4            -moz-transform:translateX(100px); /* Firefox */
5            transform:translateX(100px);
6        }

　　效果如下图所示：

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

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

1   div#div2
2        {
3            -webkit-transform:translateY(100px); /* Safari and Chrome */
4            -moz-transform:translateY(100px); /* Firefox */
5            transform:translateY(100px);
6        }

　　效果如下图所示：

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

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

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

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

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

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

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>CSS3</title>
6    <style type="text/css">
7        .father{
8            -webkit-perspective: 1000px;
9            -moz-perspective: 1000px;
10            perspective: 1000px;
11        }
12        div
13        {
14            width:120px;
15            height:75px;
16            background-color:red;
17            border:1px solid black;
18        }
19        div#div2
20        {
21            -webkit-transform:translateZ(120px); /* Safari and Chrome */
22            -moz-transform:translateZ(120px); /* Firefox */
23            transform:translateZ(120px);
24        }
25    </style>
26</head>
27<body>
28<div class="father">
29<div>ORIGINAL</div>
30<div id="div2">TRANSFORMED</div>
31</div>
32</body>
33</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。

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

　效果如下图所示：

2. rotateX(angle)，定义沿着X轴的3D旋转

rotateX(angle)表示以X轴为旋转轴旋转。

rotateX(angle)函数功能等同于rotate3d(1,0,0,angle)。

如下代码中，设置angle为40deg。

1  div#div2
2        {
3            -webkit-transform:rotateX(40deg); /* Safari and Chrome */
4            -moz-transform:rotateX(40deg); /* Firefox */
5            transform:rotateX(40deg);
6        }

　　效果如下图所示：

　 3. rotateY(angle)，定义沿着Y轴的3D 旋转

rotateY(angle)表示以Y轴为旋转轴旋转。

rotateY(angle)函数功能等同于rotate3d(0,1,0,angle)。

如下代码中，设置angle为40deg。

1div#div2
2        {
3            -webkit-transform:rotateY(40deg); /* Safari and Chrome */
4            -moz-transform:rotateY(40deg); /* Firefox */
5            transform:rotateY(40deg);
6        }

　　效果如下图所示：

　　4. rotateZ(angle)，定义沿着Z轴的3D旋转

rotateZ(angle)表示以Z轴为旋转轴旋转。

rotateZ(angle)函数功能等同于rotate3d(0,0,1,angle)。

如下代码中，设置angle为40deg。

1div#div2
2        {
3            -webkit-transform:rotateZ(40deg); /* Safari and Chrome */
4            -moz-transform:rotateZ(40deg); /* Firefox */
5            transform:rotateZ(40deg);
6        }

　　效果如下图所示：

五.scale3d(x,y,z)，scaleX(x)，scaleY(y)，scaleZ(z)定义3D缩放转换

1.scale3d(x,y,z)通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。

默认值为1，当值大于1时，元素放大，反之小于1大于0.01时，元素缩小。

当scale3d()中x和y值同时为1，即scale3d(1,1,z)，其效果等同于scaleZ(z)。

如下代码中，设置x值为2，y值为2，z值为1。

1    div#div2
2        {
3            -webkit-transform:scale3d(2,2,1); /* Safari and Chrome */
4            -moz-transform:scale3d(2,2,1); /* Firefox */
5            transform:scale3d(2,2,1);
6        }

　　效果如下图所示：

　 2.scaleX(x)通过设置X轴的值来定义缩放转换。

scaleX(x)使元素的宽变成原来的x倍。

如下代码中，设置scaleX( )值为2。

1   div#div2
2        {
3            -webkit-transform:scaleX(2); /* Safari and Chrome */
4            -moz-transform:scaleX(2); /* Firefox */
5            transform:scaleX(2);
6        }

效果如下图所示：

3.scaleY(y)通过设置Y轴的值来定义缩放转换。

scaleY(y)使元素的高变成原来的y倍。

如下代码中，设置scaleY( )值为2。

1div#div2
2        {
3            -webkit-transform:scaleY(2); /* Safari and Chrome */
4            -moz-transform:scaleY(2); /* Firefox */
5            transform:scaleY(2);
6        }

效果如下图所示：

4.scaleZ(z)通过设置Z轴的值来定义缩放转换。

　　scaleZ( )和scale3d( )函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果。

CSS3 transform变形（3D转换）

评论区

相关推荐