CSS3变形 (<a href=transform) 和CSS3过渡 (transitions) 的不同" title="CSS3变形 (transform) 和CSS3过渡 (transitions) 的不同" src="https://www.hjtpc.com/zb_users/upload/2022/08/202208111660231918160799.png"/>

CSS3变形 (transform) 和CSS3过渡 (transitions) 完全不同。可以这样理解：过渡是元素从一种状态平滑转换到另一种状态，而变形则定义了元素将会变成什么样子。CSS3中使用transform来定义变形属性，transform字面上就是变形，改变的意思。CSS变形transform是一些效果的集合，主要是移动（translate）、旋转（rotate）、缩放（scale）和倾斜（skew）这四种基本操作，还可以通过设置matrix矩阵来实现更复杂的效果，并且通过空格分隔还可以一次性实现多种变形效果。变形transform可以实现2D和3D两种效果。2D变形涉及的属性主要有transform变形函数和transform-origin变形原点。本文节点主要介绍变形transform 2D的相关知识。

2D 变形的实现更广泛，浏览器支持更好，写起来也更简单些。CSS3的2D变形模块允许我们使用下列变形，如表6-2所示

表6-2  2D变形类型                  

 

名称

 		 

描述

 
scale（缩放）
用来缩放元素(放大或缩小)
translate（移动）
 

在屏幕上移动元素(上下左右四个方向)

 
rotate（旋转）
 

按照一定角度旋转元素(单位为度)

 
 

skew（扭曲）

 		 

沿 X 和 Y 轴对元素进行斜切

 
 

matrix（矩阵变形）

 		 

允许你以像素精度来控制变形效果

 

如果要使用2D变形则需要先确定变形的基点以及变形方式，如图所示6-10所示：

CSS3变形 (transform) 和CSS3过渡 (transitions) 的不同

图6-10  2D变形需要先确定变形的基点以及变形方式

6.3.1 旋转（rotate）

rotate（<angle>）:通过指定的角度参数对原元素指定2D rotation（2D旋转），首先通过transform-origin属性定义旋转的基点，其中angle是指旋转角度，如果设置的值为正数，表示顺时针旋转；如果设置的值为负数，则表示逆时针旋转,通过案例6-7来体验,效果如图6-11所示。

例6-7  example07.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2D旋转</title>
    <style>
        .demo {
            width: 300px; height: 300px; background-color: royalblue;
            float: left; margin-left: 200px;
               }
        .demoRotate{
            width: 300px; height: 300px; background-color: red;
            transform: rotate(45deg); /*顺时针旋转45度*/
            -webkit-transform: rotate(45deg); /*Chrome, Safari*/
            -moz-transform: rotate(45deg);  /*Firefox*/
            margin-top: 100px; margin-left: 200px;
           text-align: center; font-size: 20px;
                }
    </style>
</head>
<body>
    <div></div>
    <div>此div旋转45度</div>
</body>
</html>


CSS3变形 (transform) 和CSS3过渡 (transitions) 的不同

图6-11 rotate顺时针旋转45度

6.3.2移动（translate）

translate()函数可以把元素从原来的位置移动，而不影响在x，y轴上的任何web组件，类似于position:relative。根据给定的left（x坐标），top(y坐标)位置参数，元素从其当前位置移动。移动translate分为3种情况：

1.translate(x,y)水平和垂直方向同时移动

translate移动的基点默认为元素中心点，可以根据transform-origin改变基点，translate表示对象按照设定的x，y参数值进行平移，如果第二个值没设置，默认为0，当值为负数时，反方向移动物体。通过案例6-8来体验,效果如图6-12所示。

例6-8   example08.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2D移动</title>
    <style>
        .demo {
           width: 300px; height: 300px;
background-color: royalblue; float: left;
                }
        .demoTranslate{ width: 300px; height: 300px; background-color: red;
            transform: translate(100px,150px); /*移动*/
            -webkit-transform: translate(100px,:150px);            -moz-transform: translate(100px,150px);  /*Firefox*/
            text-align: center; font-size: 20px;
             }
    </style>
</head>
<body>
    <div></div>
    <div>此div向右移动来100px，向下移动150px</div>
</body>
</html>

CSS3变形 (transform) 和CSS3过渡 (transitions) 的不同

                                 图6-12 translate向X和Y方向移动  

CSS3变形 (transform) 和CSS3过渡 (transitions) 的不同

                                                            图6-13  scale向X和Y方向缩放

2.  translateX(x)仅水平方向移动

相当于translate(x,0,)的简写，基点为元素中心点。通过给定一个X方向的数值指定一个translation，只向X轴进行移动元素，也可以通过transform-orign改变基点位置，如transform：translateX（100px）。

3. translateY(y)仅垂直方向移动

相当于translate(0,y)的简写，基点为元素在中心。通过给定一个Y方向的数值指定一个translation，只向X轴进行移动元素，也可以通过transform-orign改变基点位置，如transform：translateY（150px）。