CSS3(2D變換)
阿新 • • 發佈：2018-11-25
一.2D變換
1.旋轉transform:rotate
例:
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrap{ width: 400px; height: 400px; background: pink; /*padding: 100px 0px 0px 100px;*/ text-align: center; /*line-height: 400px;*/ transition: all 5s; margin: 100px auto; } .div_01{ margin-top: 100px; display: inline-block; width: 200px; height: 200px; background: orange; transition: all 3s; } .wrap:hover{ /*transform: rotateX(); 表示X軸的旋轉*/ /*transform: rotateY(); 表示Y軸的旋轉*/ transform: rotate(45deg); } .wrap:hover .div_01{ transform: rotate(360deg); } </style> </head> <body> <div class="wrap"> <div class="div_01"></div> </div> </body> </html>
2.位移transform:translate(水平,垂直)
例:
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ margin: 0px; padding: 0px; background: antiquewhite; transition: all 10s; } .div1{ width: 200px; height: 200px; background-color: white; } .div1:hover{ background: aqua; opacity: 0.3; border-radius: 50%; transform: translateX(700px) rotate(360deg) scale(2) skew(360deg); } </style> </head> <body> <div class="div1"></div> </body> </html>
3.扭曲transform:skew()值為度數,skewX(水平方向),skewY(垂直方向)
例:
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .div1{ width: 400px; height: 400px; background-color: darkmagenta; margin: 200px auto; transition: all 5s; } .div1:hover{ transform: skew(12138deg); } </style> </head> <body> <div class="div1"></div> </body> </html>
4.縮放transform:scale()值代表倍數,scaleX水平縮放,scaleY垂直縮放
例;
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
background: aqua;
transition: all 1s;
}
.div1:hover{
transform: scaleX(2);
/*transform: scaleY(3);*/
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>