温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Css3中的transform渐变属性怎么用

发布时间:2022-03-01 14:37:51 来源:亿速云 阅读:232 作者:小新 栏目:web开发

这篇文章主要介绍了Css3中的transform渐变属性怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

translate()素从其当前位置移动,根据给定的 leftx 坐标) 和 topy 坐标)

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渐变属性怎么用”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI