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

 


  • 精彩推荐

  • 2019-05-29 14:19:19

    解决Git中fatal: refusing to merge unrelated histories

    Git的报错 在使用Git的过程中有时会出现一些问题，那么在解决了每个问题的时候，都需要去总结记录下来，下次不再犯。 一、fatal: refusing to merge unrelated histories 今天在使用Git创建项目的时候，在两个分支合并的时候，出现了下面的这个错误。

  • 2019-05-29 15:47:51

    撤销commit

    在git push的时候，有时候我们会想办法撤销git commit的内容

  • 2019-06-03 00:07:32

    Android程序Crash时的异常上报

    家都知道，android应用不可避免的会发生crash，无论你的程序写的多完美，总是无法完全避免crash的发生，可能是由于android系统底层的bug，也可能是由于不充分的机型适配或者是糟糕的网络状况。当crash发生时，系统会kill掉你的程序，表现就是闪退或者程序已停止运行，这对用户来说是很不友好的，也是开发者所不愿意看到的，更糟糕的是，当用户发生了crash，开发者却无法得知程序为何crash，即便你想去解决这个crash，但是由于你无法知道用户当时的crash信息，所以你也无能为力。是否真的这样呢，其实android中有处理这类问题的方法，请看下面Thread类中的一个方法#setDefaultUncaughtExceptionHandler

  • 2019-06-04 16:40:30

    为了美观当网页图片不存在时不显示叉叉图片

    当在页面显示的时候，万一图片被移动了位置或者丢失的话，将会在页面显示一个带X的图片，很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息，也起不了多大作用。