Css3中的transform渐变属性怎么用
这篇文章主要介绍了Css3中的transform渐变属性怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联公司主营夏县网站建设的网络公司,主营网站建设方案,App定制开发,夏县h5微信小程序开发搭建,夏县网站营销推广欢迎夏县等地区企业咨询
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;
}
感谢你能够认真阅读完这篇文章,希望小编分享的“Css3中的transform渐变属性怎么用”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
分享题目:Css3中的transform渐变属性怎么用
新闻来源:http://pwwzsj.com/article/ghjoid.html