不要嫌麻煩或簡單而不去做 o(>﹏<)o不要啊！
前言：
-
CSS
transform屬性允許你修改CSS視覺格式模型的坐標空間。使用它，元素可以被轉(zhuǎn)換
translate、旋轉(zhuǎn)rotate、縮放scale、傾斜skew。 因為這些屬性而去翻閱 W3C 或是 MDN 還是挺麻煩的，不如一次性列出它們的效果，這必須更方便；
不要嫌麻煩或簡單而不去做。
效果圖：
transform屬性
代碼部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
width: 200px;
height: 200px;
margin: 50px;
float: left;
border: 1px solid gray;
/* 支持3D 空間呈現(xiàn) */
transform-style: preserve-3d;
}
.box{
width: 100%;
height: 100%;
opacity: 0.75;
}
/* 2d 平移 */
#div_1 .box{
background-color: red;
/*transform: translateX(-30px) translateY(30px);*/
transform: translate(30px, -30px);
}
/* 2d 縮放 */
#div_2 .box{
background-color: deepskyblue;
/*transform: scaleX(0.5) scaleY(0.8);*/
transform: scale(0.5, 0.8);
}
/* 2d 旋轉(zhuǎn) */
#div_3 .box{
background-color: palevioletred;
/*transform-origin: bottom center;*/
transform: rotate(45deg) scaleX(1.2) scaleY(0.5);
}
/* 2d 傾斜 */
#div_4 .box{
background-color: darkblue;
/*transform: skewX(30deg);*/
/*transform: skewY(30deg);*/
transform: skew(30deg, 30deg);
}
/* 3d 平移 */
#div_5 .box{
background-color: darkcyan;
/*transform: perspective(200px) translateZ(50px);*/
transform: perspective(600px) translate3d(50px, 50px, 100px);
}
/* 3d旋轉(zhuǎn) */
#div_6 .box{
background-color: brown;
/*transform: perspective(600px) rotateX(45deg);*/
/*transform: perspective(600px) rotateY(45deg);*/
/*transform: perspective(600px) rotateZ(45deg);*/
transform: perspective(600px) rotate3d(1, 1, 1, 45deg);
}
/* 3d 縮放 */
#div_7 .box{
background-color: orange;
transform: perspective(600px) scaleZ(5) rotateX(45deg);
}
</style>
</head>
<body>
<div id="div_1" class="container">
<div class="box"></div>
</div>
<div id="div_2" class="container">
<div class="box"></div>
</div>
<div id="div_3" class="container">
<div class="box"></div>
</div>
<div id="div_4" class="container">
<div class="box"></div>
</div>
<div id="div_5" class="container">
<div class="box"></div>
</div>
<div id="div_6" class="container">
<div class="box"></div>
</div>
<div id="div_7" class="container">
<div class="box"></div>
</div>
</body>
</html>
