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 {
            width70px;
            height70px;
            background-color#8fbc8f;
        }
 
 .after {
            width70px;
            height70px;
            background-color#ffe4c4;
            -webkit-transform: translate(50px30px);
            -moz-transform: translate(50px30px);
            -ms-transform: translate(50px30px);
            -o-transform: translate(50px30px);
            transform: translate(50px30px);
        }

 

结果如下:

rotate()

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.before {
            width70px;
            height70px;
            background-color#8fbc8f;
        }
 
.after {
            width70px;
            height70px;
            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 {
            width70px;
            height70px;
            background-color#8fbc8f;
        }
 
.after {
            width70px;
            height70px;
            background-color#ffe4c4;
            -webkit-transform: scale(1.50.8);/*宽度变为原来的1.5倍,高度变为原来的0.8倍*/
            -moz-transform: scale(1.50.8);
            -ms-transform: scale(1.50.8);
            -o-transform: scale(1.50.8);
            transform: scale(1.50.8);
        }

结果如下:

skew()

元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.before {
            width70px;
            height70px;
            background-color#8fbc8f;
        }
 
.after {
            width70px;
            height70px;
            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;
        }

 


  • 2020-01-08 23:45:06

    laravel response 对象一些常用功能点

    通常,我们并不只是从路由动作简单返回字符串和数组,大多数情况下,都会返回一个完整的 Illuminate\Http\Response 实例或 视图。

  • 2020-01-08 23:49:13

    laravel 存储base64格式图片

    一、总结 一句话总结: 二、laravel存储64位图片实例 三、laravel 存储前端上传base64图片 四、php将base64字符串转换为图片

  • 2020-01-09 01:24:28

    mac安装ImageMagick与PHP扩展Imagick

    mac安装ImageMagick和php7.2扩展Imagick,从网上搜索教程,感觉好少,有的教程看起来也很麻烦,不过安装起来,没想到竟然如此简单。不非纯灰之力。

  • 2020-01-09 18:49:17

    pecl安装卸载模块,如何自动配置php.ini

    利用pecl安装php模块,可能需要手工配置php.ini,以加载或禁止相关模块。那么pecl install是不是可以自动配置php.ini呢?答案是肯定的。在pecl isntall的提示信息中,苏南大叔找到了下面的类似提示信息:configuration option "php_ini" is not set to php.ini location。这个设置点,就是本文的关键所在。设置好"php_ini"之后,pecl就可以自动修改php.ini中的extension=了。

  • 2020-01-10 10:23:08

    父元素设置min-height子元素设置100%问题

    父元素设置min-height子元素高度设置100%取不到值,这是因为子元素 div设置 height:100%;只有当父级元素满足min-height:1000px;设置的条件才触发;浏览器默认是不会触发的,所以子元素的100%的高度继承就失效了。min-height 是在 height 计算之后再套用的.

  • 2020-01-10 15:48:46

    Linux下查看文件精确到秒的修改时间

    今天排查一个BUG遇到一个问题,错误日志中打印的时间精确到秒,但当根据日志中的时间去找对应文件进行验证的时候,发现通过 ls -l 或者 ll 命令,都无法查看到文件精确到秒的修改时间。

  • 2020-01-10 15:55:05

    linux php yum 安装Imagick

    通过pecl安装Imagick扩展,成功到是成功了,很顺利,但是so包并不在我当年用yum安装的php7.2的扩展包内,我把生成的Imagick.so,移动到当前用的php包内,并不能用,提示 undefined symbol: spl_ce_Countable)) in Unknown on line 0。

  • 2020-01-10 15:57:06

    Centos 安装php Imagick 扩展

    yum install ImageMagick ImageMagick-devel ImageMagick-perl 下一步,验证ImageMagick已经安装在你的系统上并验证它的版本