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

 


  • 精彩推荐

  • 2020-12-07 05:46:56

    npm设置和取消代理的方法

    有时候是设置了全局代理对npm并不生效，不如直接给npm设置代理，至少在mac电脑我是有这种感觉的。

  • 2020-12-07 15:04:03

    node开发邮件系统总结

    因为multipart这种形式比较复杂，因此要利用boundary分割符，将邮件体分割成不同段来进行解析，boundary分为父段和子段，父段一般出现0次或1次，出现在末尾，每个子段中也有content-type和boundary，需要在进行解析，如果遇到i,iii里面的情况可直接解析，如果遇到ii中的情况，再按ii中的步骤进行解析

  • 2020-12-07 15:17:45

    email-templates + mjml 发送邮件

    mjml 是一个很不错的响应式邮件html 内容标签库，email-templates 是一个灵活强大的邮件发送框架，两者集成起来我们 可以设计灵活强大的邮件发送系统，以下是一个简单的集成使用，实际使用还有好多地方需要完善

  • 2020-12-07 15:19:00

    响应式邮件的编写插件介绍mjml

    以前做项目碰到发邮件的需求，邮件模板的编辑就是一件头疼的事。因为虽说邮件是支持 HTML 的，但是确是 HTML 子集程度的支持，所以存在必须通过 <table> 排版的恶心之处，还有很多兼容性的坑。本质上是各家邮件商的标准有差异吧。

  • 2020-12-07 16:14:22

    nodejs队列实现amqplib,rabbitmq

    其中StartConsumer 会在项目启动时启动，在整个生命周期中一直保持监听状态，在程序结束时mq的链接关闭。需要注意的是 noAck 这个参数，当为false是表示消息出队后不会自动删除，如果设置成true,则无论消息处理成功与否此消息会被删除。注意到在消息不成功是，调用了ch.nack(msg))，此方法是将消息重新入队。

  • 2020-12-07 16:15:46

    RabbitMQ详解

    当前市面上mq的产品很多，比如RabbitMQ、Kafka、ActiveMQ、ZeroMQ和阿里巴巴捐献给Apache的RocketMQ。甚至连redis这种NoSQL都支持MQ的功能。 ActiveMQ ActiveMQ是apache出品，最流行的，能力强劲的开源消息总线，并且它一个完全支持JMS规范的消息中间件。其丰富的API、多种集群构建模式使得它成为业界老牌消息中间件，在中小型企业中应用广泛。

  • 2020-12-07 16:17:53

    nodejs用redis实现队列操作

    其实nodejs实现队列的方式又很多中，也有很多开源的插件和队列数据库可以使用，但是呢，如果我们一个简单的项目，完全可以使用redis来实现队列， 这样再不增加技术难度的同事，我们也就可以完美的实现一个队列