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;
        }

 


  • 精彩推荐

  • 2018-12-16 12:12:12

    android:windowSoftInputMode属性具体解释

    android:windowSoftInputMode属性一共同拥有9个取值。各自是： stateUnspecified，stateUnchanged。stateHidden，stateAlwaysHidden。stateVisible，stateAlwaysVisible，adjustUnspecified，adjustResize。adjustPan。

  • 2018-12-16 18:14:23

    Android在代码中设置状态栏半透明/全透明

    顶部是有文字，小图标等，如果直接用透明半透明 状态栏上的东西会与内容重叠（你觉得无所谓也可以直接用上面2部分代码），这样我们就想做成类似支付宝这样的效果：

  • 2018-12-18 15:33:01

    <![CDATA[]]>和转义字符

    　　此标记用于xml文档中，我们先来看看使用转义符的情况。我们知道，在xml中，”<”、”>”、”&”等字符是不能直接存入的，否则xml语法检查时会报错，如果想在xml中使用这些符号，必须将其转义为实体，如”&lt;”、”&gt;”、”&amp;”，这样才能保存进xml文档。

  • 2018-12-26 15:06:00

    PHP-FPM运行状态的实时查看及监控详解

    php-fpm和nginx一样内建了一个状态页，对于想了解php-fpm的状态以及监控php-fpm非常有帮助。这篇文章就给大家详细介绍了PHP-FPM运行状态的实时查看及监控，有需要的朋友们可以参考学习，感兴趣的朋友们下面来一起看看吧。

  • 2018-12-26 16:12:56

    nginx+php-fpm模式php内存泄漏探究

    这里要重点说一下第三步骤。第三步涉及到php-fpm进程生命周期的东西。一个php-fpm的生命周期大致是这样的：模块初始化（MINIT）-> 模块激活（RINIT）-> 请求处理 -> 模块停用（RSHUTDOWN） -> 模块激活（RINIT）-> 请求处理 -> 模块停用（RSHUTDOWN）……. 模块激活（RINIT）-> 请求处理 -> 模块停用（RSHUTDOWN）-> 模块关闭（MSHUTDOWN）。在一个php-fpm进程的生命周期里，会有多次的模块激活（RINIT）-> 请求处理 -> 模块停用（RSHUTDOWN）的过程。这个“请求处理”的大致过程是这样的：php读取相应的php文件，对其进行词法分析，生成opcode，zend虚拟机执行opcode。