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-09 15:52:37

    【Android - 进阶】之Animator属性动画

    在3.0系统之前，Android给我们提供了逐帧动画Frame Animation和补间动画Tween Animation两种动画： 逐帧动画的原理很简单，就是将一个完整的动画拆分成一张张单独的图片，然后将它们连贯起来进行播放； 补间动画是专门为View提供的动画，可以实现View的透明度、缩放、平移和旋转四种效果。

  • 2018-12-09 18:12:45

    显示软键盘,并让布局压缩

    博客 学院 下载 图文课 论坛 APP 问答 商城 VIP会员 活动 招聘 ITeye GitChat 搜博主文章 写博客传资源 原

  • 2018-12-09 22:48:14

    ToolBar修改返回按钮图标

    使用Toolbar时，有时因为不同的手机设备，不能使用系统默认的主题样式或者图标，必须指定特定的资源，防止APP在不同设备上的效果不一样！ 我在使用Toolbar时，把这个布局作为一个公共的了，所以修改起来比较容易，下面是该Toolbar的布局文件：

  • 2018-12-09 22:49:12

    Android 修改Toolbar自带的图标颜色

    toolbar自带的按钮颜色是黑色，现在想修改按钮图标颜色，方法如下： 在布局文件中的Toolbar中增加如下2个 属性

  • 2018-12-09 22:50:46

    Toolbar 标题字体大小及字体颜色

    无师无门遇到点破事也得百度，就单单这破问题 Toolbar 标题字体大小及字体颜色，结果百度一推重复没用的结果，要么一推英文的解释，小学学历的我表示很崩溃！

  • 2018-12-10 00:57:37

    Android沉浸式状态栏(透明状态栏)最佳实现

    在Android4.4之前，我们的应用没法改变手机的状态栏颜色，当我们打开应用时，会出现上图中左侧的画面，在屏幕的顶部有一条黑色的状态栏，和应用的风格非常不协调；为了提供更好的界面交互，google在Android4.4以后提供了设置沉浸式状态栏的方法，对于沉浸式状态栏这个名字存在争议，我们不做讨论，实际的效果其实就是透明的状态栏，然后在状态栏的位置显示我们自定义的颜色，通常为应用的actionbar的颜色，或者是将应用的整体的一张图片也占据到状态栏中，如下图所示：

  • 2018-12-11 10:20:40

    Android下载图片到相册

    调用以上系统自带的方法会把bitmap对象保存到系统图库中，但是这种方法无法指定保存的路径和名称，上述方法的title、description参数只是插入数据库中的字段，真实的图片名称系统会自动分配。 或者

  • 2018-12-11 15:45:00

    Laravel中七个非常有用但很少人知道的Carbon方法

    在编写PHP应用时经常需要处理日期和时间，Carbon继承自 PHP DateTime 类的 API 扩展，它使得处理日期和时间更加简单，这篇文章主要给大家分享了Laravel中七个非常有用但很少人知道的Carbon方法，需要的朋友可以参考下。