transform与transition区别与详解

2020-04-27 09:26:49

参考地址 CSS中的transform与transition

transform：转换

对元素进行移动、缩放、转动、拉长或拉伸。

方法：translate():

元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数

有两个div，它们的css样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.before {
            width: 70px;
            height: 70px;
            background-color: #8fbc8f;
        }
 
 .after {
            width: 70px;
            height: 70px;
            background-color: #ffe4c4;
            -webkit-transform: translate(50px, 30px);
            -moz-transform: translate(50px, 30px);
            -ms-transform: translate(50px, 30px);
            -o-transform: translate(50px, 30px);
            transform: translate(50px, 30px);
        }

 

结果如下：

rotate()

元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

有两个div，它们的css样式如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.before {
            width: 70px;
            height: 70px;
            background-color: #8fbc8f;
        }
 
.after {
            width: 70px;
            height: 70px;
            background-color: #ffe4c4;
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            -ms-transform: rotate(20deg);
            -o-transform: rotate(20deg);
            transform: rotate(20deg);
        }

结果如下：

scale()

元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

有两个div，它们的css样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.before {
            width: 70px;
            height: 70px;
            background-color: #8fbc8f;
        }
 
.after {
            width: 70px;
            height: 70px;
            background-color: #ffe4c4;
            -webkit-transform: scale(1.5, 0.8);/*宽度变为原来的1.5倍，高度变为原来的0.8倍*/
            -moz-transform: scale(1.5, 0.8);
            -ms-transform: scale(1.5, 0.8);
            -o-transform: scale(1.5, 0.8);
            transform: scale(1.5, 0.8);
        }

结果如下：

skew()

元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.before {
            width: 70px;
            height: 70px;
            background-color: #8fbc8f;
        }
 
.after {
            width: 70px;
            height: 70px;
            background-color: #ffe4c4;
            -webkit-transform: skew(20deg, 20deg);/*围绕 X 轴把元素翻转20度，围绕 Y 轴翻转20度*/
            -moz-transform: skew(20deg, 20deg);
            -ms-transform: skew(20deg, 20deg);
            -o-transform: skew(20deg, 20deg);
            transform: skew(20deg, 20deg);
        }

　　

结果如下：

 

 

 

transition:过渡

元素从一种样式逐渐改变为另一种的效果

有一个div，它的css样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
div {
            width:100px;
            height:100px;
            background-color: #87cefa;
            -webkit-transition: width 2s;/*时长为2s的宽度变化效果*/
            -moz-transition: width 2s;
            -o-transition: width 2s;
            transition: width 2s;
        }
div:hover{
            width:300px;
        }

 


  • 精彩推荐

  • 2017-07-15 16:13:26

    设置MySQL里的wait_timeout

    如果你没有修改过MySQL的配置，缺省情况下，wait_timeout的初始值是28800。

  • 2017-07-16 20:13:14

    nodejs,express 自制错误日志

    对于同步执行的代码，以上的处理已经足够简单。然而，当异步程序在执行时抛出异常的情况，Express 就无能为力。原因在于当你的程序开始执行回调函数时，它原来的栈信息已经丢失。

  • 2017-07-16 20:17:56

    NodeJS处理Express中异步错误

    本文主要阐述如何在 Express 中使用错误处理中间件（error-handling middleware）来高效处理异步错误。在 Github 上有对应 代码实例 可供参考。

  • 2017-07-17 09:36:47

    linux service 命令使用说明

    service命令用于对系统服务进行管理，比如启动（start）、停止（stop）、重启（restart）、查看状态（status）等。相关的命令还包括chkconfig、ntsysv等，chkconfig用于查看、设置服务的运行级别，ntsysv用于直观方便的设置各个服务是否自动启动。service命令本身是一个shell脚本，它在/etc/init.d/目录查找指定的服务脚本，然后调用该服务脚本来完成任务。

  • 2017-07-17 14:48:15

    通过node.js保存emoji到mysql

    但是emoji通过utf-8编码后，每个字符占4个字节，属于宽字符。而老版本的mysql只支持一个字符占3个字节，所以老版本的mysql是无法存储emoji的。新版本的mysql增加了字符集utf8mb4，可以支持单字符最多占4个字节。utf8mb4是utf8的超集，可以无需修改地支持原来的utf8字符 要让mysql存储emoji，需要满足2个条件：

  • 2017-07-17 14:48:20

    通过node.js保存emoji到mysql

    但是emoji通过utf-8编码后，每个字符占4个字节，属于宽字符。而老版本的mysql只支持一个字符占3个字节，所以老版本的mysql是无法存储emoji的。新版本的mysql增加了字符集utf8mb4，可以支持单字符最多占4个字节。utf8mb4是utf8的超集，可以无需修改地支持原来的utf8字符 要让mysql存储emoji，需要满足2个条件：