移动端第九章变形

科技2022-08-12 84

变形

变换/变形：transform

移动：translate

translate(X px,Y px);

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background: red; margin: 100px auto; /*过渡属性*/ transition: 1s; } div:hover{ /*transform:translateX(300px)*/ /*transform:translateY(300px)*/ /*transform:translate(300px,300px)*/ transform:translate(-300px,300px) } </style> </head> <body> <div></div> </body> </html>

旋转/负值就是倒转:rotate

rotate(-360deg);

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background: red; margin: 100px auto; /*过渡属性*/ transition: 1s; } div:hover{ /*transform: rotateX(360deg);*/ /*transform: rotateY(360deg);*/ /*transform: rotate(360deg);*/ transform: rotate(-360deg); /*正数是顺时针旋转，负数是逆时针旋转*/ } </style> </head> <body> <div>1</div> </body> </html>

缩放:scale

scale(x,y)；

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background: red; margin: 100px auto; /*过渡属性*/ transition: 1s; } div:hover{ /*transform: scaleX(2);*/ /*transform: scaleY(2);*/ /*transform: scaleY(.5);*/ /*transform: scale(.5);*/ /*transform: scale(0);*/ transform: scale(-2); } </style> </head> <body> <div>1</div> </body> </html>

扭曲:skew

skew(x deg,y deg)

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background: red; margin: 100px auto; /*过渡属性*/ transition: 1s; } div:hover{ /*transform: skewX(-80deg);*/ /*transform: skewY(50deg);*/ /*transform: skew(50deg,20deg);*/ } </style> </head> <body> <div>1</div> </body> </html>

Processed: 0.010, SQL: 8