一、2d变换
1、transform 设置或检索对象的转换
取值:
none::以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate([, ])。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0。
立即学习“前端免费学习笔记(深入)”;
translateX():指定对象X轴(水平方向)的平移
translateY():指定对象Y轴(垂直方向)的平移
rotate():指定对象的2D rotation(2D旋转)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
scaleX():指定对象X轴的(水平方向)缩放
scaleY():指定对象Y轴的(垂直方向)缩放
skew( [, ]):指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0 skewX():指定对象X轴的(水平方向)扭曲
skewY():指定对象Y轴的(垂直方向)扭曲
注:不同浏览器需写以下前缀。
内核类型 写法 Webkit(Chrome/Safari)-webkit-transform
Gecko(Firefox)-moz-transform
Presto(Opera)-o-transform
Trident(IE)-ms-transform
W3Ctransform
例子:
CSS代码:
#transform1 { margin: 0 auto; width: 100px; height: 100px; background-color: mediumvioletred; -webkit-transform: rotate(15deg); }
登录后复制
HTML代码:
<div id="transform1">旋转了15度</div>
登录后复制
2、transform-origin 设置或检索对象以某个原点进行转换。
取值:
:用百分比指定坐标值。可以为负值。
:用长度值指定坐标值。可以为负值。
left:指定原点的横坐标为leftcenter①:指定原点的横坐标为
centerright:指定原点的横坐标为
righttop:指定原点的纵坐标为
topcenter②:指定原点的纵坐标为
centerbottom:指定原点的纵坐标为bottom
不同浏览器下的写法:
内核类型 写法 Webkit(Chrome/Safari)-webkit-transform-origin
Gecko(Firefox)-moz-transform-origin
Presto(Opera)-o-transform-origin
Trident(IE)-ms-transform-origin
W3Ctransform-origin
例子:
CSS代码:
#transform1 { margin: 0 auto; width: 100px; height: 100px; background-color: mediumvioletred; -webkit-transform: rotate(15deg);/*旋转15度*/ -webkit-transform-origin: left top; /*以左上角为原点旋转*/ }
登录后复制
HTML代码:
<div id="transform1"></div>
登录后复制
二、过渡样式
1、transition-property 检索或设置对象中的参与过渡的属性。
取值:
all:所有可以进行过渡的css属性 none:不指定过渡的css属性 有过渡效果的属性: 例子: CSS代码:
#transform1 { margin: 0 auto; width: 100px; height: 100px; background-color: red; transition-property: background-color; } #transform1:hover { transition-duration:.5s; transition-timing-function:ease-in; background-color: yellow; }
登录后复制 HTML代码:
<div id="transform1">请将鼠标放在上面</div>
登录后复制请将鼠标放在上面 2、transition-duration 检索或设置对象过渡的持续时间 transition-duration:time 例子可参见上个例子。
3、transition-timing-function 检索或设置对象中过渡的动画类型。
取值: linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)cubic-bezier(, , , ):特定的贝塞尔曲线类型,4个数值需 在[0, 1]区间内。 例子可参见上个例子。 4、transition-delay 设置对象延迟过渡的时间。 CSS代码:
#delay1 { background-color: antiquewhite; width:100px; height:100px; } #delay1:hover { transition-delay:1s; transition-timing-function:ease-in; background-color: black; } #delay2 { background-color: antiquewhite; width:100px; height:100px; } #delay2:hover { transition-delay:4s; transition-timing-function:ease-in; background-color: blue; }
登录后复制 HTML代码;
<div id="delay1">延迟1s后开始过渡</div><div id="delay2">延迟4s后开始过渡</div>
登录后复制延迟1s后开始过渡延迟4s后开始过渡 ***一般情况下可以将变形与过渡结合使用制作出一些特别的效果。 例: CSS代码:
#all { width: 100px; height: 100px; background-color: red; } #all:hover { background-color: yellow; transition-delay: .5s; transition-timing-function: ease-in; transform: scale(1.5,1.5); transition-duration: 1s; }
登录后复制 HTML代码:
<div id="all">请把鼠标放在上面查看效果</div>
登录后复制请把鼠标放在上面查看效果
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2838056.html