transform

xiaoxiao2021-02-28  87

实例1:transform:rotate()旋转变换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform:rotate()</title> <style> body{ height:400px; border:solid 1px #000; } .box{ width:100px; height:100px; background:red; margin:100px auto 0; transition: 2s; } body:hover .box{ -Webkit-transform:rotate(30deg);/*顺时针旋转30度*/ } </style> </head> <body> <div class="box">111</div><!-- 文字一同旋转 --> </body> </html> 实例2:transform:skew()斜切变换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform:skewX()</title> <style> body{ height:400px; border:solid 1px #000; } .box{ width:100px; height:100px; background:red; margin:100px auto 0; transition: 2s; } body:hover .box{ -Webkit-transform:skewX(15deg);/*底边水平向右移动,改变左边与Y轴夹角15deg*/ } </style> </head> <body> <div class="box"> skew() </div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform:skewY()</title> <style> body{ height:400px; border:solid 1px #000; } .box{ width:100px; height:100px; background:red; margin:100px auto 0; transition: 2s; } body:hover .box{ -Webkit-transform:skewY(15deg);/*左边水平向上移动,改变底边与X轴夹角15deg*/ } </style> </head> <body> <div class="box"> skew() </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform:skew(X,Y)</title> <style> body{ height:400px; border:solid 1px #000; } .box{ width:100px; height:100px; background:red; margin:100px auto 0; transition: 2s; } body:hover .box{ -Webkit-transform:skew(15deg,30deg);/*左边与Y轴夹角15deg,底边与X轴夹角30deg*/ } </style> </head> <body> <div class="box"> skew() </div> </body> </html>

实例3:transform:scale()缩放变换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform:scale(X,Y)</title> <style> body{ height:400px; border:solid 1px #000; } div[class^='box']{ width:100px; height:100px; background:red; margin:100px ; transition: 2s; float: left; font:50px/100px "宋体"; text-align:center; } body:hover .box1{ -Webkit-transform:scale(0.5);/*小于1缩小*/ } body:hover .box2{ -Webkit-transform:scale(2);/*大于1放大*/ } div:nth-child(even){ color:rgba(255,255,255,1); } div:nth-child(odd){ color:rgba(0,0,0,1); } </style> </head> <body> <div class="box1"> 缩小 </div> <div class="box2"> 放大 </div> <div class="box1"> 缩小 </div> <div class="box2"> 放大 </div> </body> </html> 实例4:transform:translate()位移变换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform:translate(X,Y)</title> <style> body{ height:400px; border:solid 1px #000; } .box{ width:100px; height:100px; background:red; margin:100px auto 0; transition: 2s; font:50px/100px "宋体"; color:#fff; text-align:center; } body:hover .box{ -Webkit-transform:translate(100px); /*transform:translateX(正数为从左往右 负数为从右往左); transform:translateY(正数为从上往下 负数为从下往上);*/ } </style> </head> <body> <div class="box"> 位移 </div> </body> </html> 实例5:transform-origin(X,Y) 旋转的基点

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform-origin:</title> <style> body{ height:400px; border:solid 1px #000; } .box{ height:100px; width: 100px; background:red; margin:100px auto; transition:5s; -Webkit-transform-origin:right bottom;/*如果设置的两个值都是0,则围绕左上角旋转*/ } body:hover .box{ -Webkit-transform:rotate(360deg) scale(0); } </style> </head> <body> <div class="box"> 转呀转 </div> </body> </html>

总结:

transform:rotate(角度)顺时针  单位deg

transform:skew(斜切X,斜切Y)单位deg

:skewX(斜切X

:skewY(斜切Y

transform:scale(缩放X,缩放Y)无单位(>1放大/<1缩小)

:scaleX(缩放X)

:scaleY(缩放Y)

transform:translate(位移X,位移Y)单位px  若只写一个值谷歌浏览器默认为水平移动,竖直方向不动

:translateX(位移X)

:translateY(位移Y)

X正值:从左至右,负值:从右至左

Y正值:从上至下,负值:从下至上

transform-origin(X,Y) 单位em、px、%、left、center......

 1、top left | left top 等价于 0 0 | 0% 0% 2、top | top center | center top 等价于 50% 0 3、right top | top right 等价于 100% 0 4、left | left center | center left 等价于 0 50% | 0% 50% 5、center | center center 等价于 50% 50%(默认值) 6、right | right center | center right 等价于 100% 50% 7、bottom left | left bottom 等价于 0 100% | 0% 100% 8、bottom | bottom center | center bottom 等价于 50% 100% 9、bottom right | right bottom 等价于 100% 100%

transform:rotate(角度)skew(斜切X,斜切Y)scale(缩放X,缩放Y)translate(位移X,位移Y);取值从从面的属性开始计算。

实例1:
转载请注明原文地址: https://www.6miu.com/read-63113.html

最新回复(0)