首页 >web前端 >css教程 > Css3中的transform 渐变属性怎么使用

Css3中的transform 渐变属性怎么使用

php中世界最好的语言
php中世界最好的语言原创
2017-12-01 14:29:473271浏览

我们知道translate元素是让元素从当前位置移动,根据我们给定的坐标来进行位移,下面就给大家详细的解读一下translate,以及做一个小案例帮助大家理解,一起来看一下。

translate()素从其当前位置移动,根据给定的left(x 坐标) 和 top(y 坐标)

translate(x,y)定义2d转换 xy为数字 x正为右 负为左 y正为下 负为上

translate3d(x,y,z)定义3D转换

scale()方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数

scale(x,y)定义2D转换 x y 为倍数

scale(2,4)把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍

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

rotate(30deg)表示旋转30度

matrix()方法

skew(x-angle,y-angle)定义 2D 倾斜转换,沿着 X 和 Y 轴。

transition过渡属性transition-property 属性规定应用过渡效果的 CSS 属性的名称 比如:width

transition-property: none|all|property;

transition-duration属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。

transition-timing-function属性规定过渡效果的速度曲线。

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-

bezier(n,n,n,n); ease:规定慢速开始,然后变快

transition-delay 属性规定过渡效果何时开始。

例子:

div
{width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

CSS3关于translate属性的详细介绍

CSS3关于background-size属性的详细介绍

CSS3函数rotate()怎么使用

以上是 Css3中的transform 渐变属性怎么使用的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn