css3中的translate,transform,transition的区别

translate:移动,transform的一个方法

              通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:

          用法transform: translate(50px, 100px);

              -ms-transform: translate(50px,100px);

              -webkit-transform: translate(50px,100px);

              -o-transform: translate(50px,100px);

              -moz-transform: translate(50px,100px);

transform:变形。改变

                 CSS3中主要包括 旋转:rotate() 顺时针旋转给定的角度,允许负值 rotate(30deg)

                   扭曲:skew() 元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:skew(30deg,20deg)

                   缩放:scale() 放大或缩小,根据给定的宽度(X 轴)和高度(Y 轴)参数: scale(2,4)

                   移动:translate() 平移,传进 x,y值,代表沿x轴和y轴平移的距离

                   所有的2D转换方法组合在一起: matrix()  旋转、缩放、移动以及倾斜元素

                   matrix(scale.x ,, , scale.y , translate.x, translate.y)      

   改变起点位置 transform-origin: bottom left;

   综合起来使用:transform: 30deg 1.5 30deg 20deg 100px 200px;

transition: 允许CSS属性值在一定的时间区间内平滑的过渡,

            需要事件的触发,例如单击、获取焦点、失去焦点等

            transition:property duration timing-function delay;

                   property:CSS的属性,例如:width height 为none时停止所有的运动,可以为transform

                   duration:持续时间

                   timing-function:ease等

                   delay:延迟

                   注意:当property为all的时候所有动画

            例如:transition:width 2s ease 0s;

            http://www.w3cplus.com/content/css3-transition

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MelonTeam专栏

Bitmap 源码阅读笔记

导语: Android 系统上的图片的处理,跟Bitmap 这个类脱不了关系,我们有必要去深入阅读里面的源码,以便在工作中能更好的处理Bitmap相关的问题...

2508
来自专栏Petrichor的专栏

Dataset 列表:机器学习研究

In computer vision, face images have been used extensively to develop face recog...

1521
来自专栏linux驱动个人学习

高通Audio中ASOC的machine驱动

ASoC被分为Machine、Platform和Codec三大部分,其中的Machine驱动负责Platform和Codec之间的耦合以及部分和设备或板子特定的...

9774
来自专栏跟着阿笨一起玩NET

c# 使用timer定时器操作,上次定时到了以后,下次还未执行完怎么处理

------解决方案-------------------------------------------------------- 开始的时候,禁用定时器,你...

2661
来自专栏码匠的流水账

聊聊HystrixThreadPool

hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java

781
来自专栏Hadoop数据仓库

Oracle sqlldr 如何导入一个日期列

1. LOAD DATA INFILE * INTO TABLE test FIELDS TERMINATED BY X'9' TRAILING NULLCO...

1796
来自专栏专知

2018年SCI期刊最新影响因子排行,最高244,人工智能TPAMI9.455

2018年6月26日,最新的SCI影响因子正式发布,涵盖1万2千篇期刊。CA-Cancer J Clin 依然拔得头筹,其影响因子今年再创新高,达244.585...

1282
来自专栏余生开发

echarts太阳分布图-饼图来回穿梭

var dom = document.getElementById("container");

1202
来自专栏Pulsar-V

Save Camera Document

#pragma once #include "HCCamera.h" #include <time.h> #include <cstdio> #incl...

2828
来自专栏WOLFRAM

错觉艺术的巅峰,错觉图形大师M.C. Escher的不可能方块的可能模型

1343

扫码关注云+社区