利用CSS3中的transform屬性畫菱形和平行四邊形
transform 實現2D或是3D的變形轉換，通過transform可以實現對元素的四種變換：旋轉、縮放、移動、傾斜
一、菱形
菱形的特點：菱形的四條邊相等，可以理解為正方形的一種，所以分析可以通過正方形的旋轉得到菱形
transform:rotate(45deg); 將正方形旋轉45deg
注意：transform屬性並不是所有的瀏覽器都可以支持的，為了兼容不支持transform屬性的瀏覽器，所以要使用廠商前綴。添加廠商前綴的快捷方式：transform 后 tab鍵。即可自動生成帶有廠商前綴的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style> .diamond{ width:200px;height:200px; background: #faa; margin:50px auto; -webkit-transform:rotate(45deg) ; //Webkit / Safari / Chrome -moz-transform:rotate(45deg) ; //Firefox -ms-transform:rotate(45deg) ; //Internet Explorer -o-transform:rotate(45deg) ; //Opera transform:rotate(45deg) ;
}
</style>
</head>
<body>
<div class="diamond"></div>
</body>
</html>
實現效果
二、平行四邊形
運用了transform屬性中的skew值，定義了元素傾斜度數。沿着X軸和Y軸的2D傾斜轉換，X軸傾斜20deg，Y軸傾斜20deg。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style> .prallel{ width:200px; height:100px; background: #faa; margin:100px auto; -webkit-transform: skew(20deg,20deg); -ms-transform: skew(20deg,20deg); -o-transform: skew(20deg,20deg); transform: skew( 20deg,20deg);
}
</style>
</head>
<body>
<div class="prallel"></div>
</body>
</html>
表現效果：
三、立方體
在這個例子中是通過設置三個div元素來制作立方體的三個面
第一個div盒子#box1 默認的是塊元素，所以獨占一行，占據上面一行；第二個盒子#box2 和第三個盒子 #box3，將其設置為 display:inline-block 行內塊元素，所以既可以共同存在於一行，又可以設置寬高。
注意：行內塊元素因為頁面排版會出現空白間距問題設置 font-size:0; 解決。詳情查看博客https://www.cnblogs.com/nyw1983/p/11626975.html
運用了transform屬性中的skew值，定義了元素傾斜度數。沿着X軸和Y軸的2D傾斜轉換，
box1 在X軸傾斜 -45deg，Y軸傾斜 0deg；
box3 在X軸傾斜 0deg，Y軸傾斜 -45deg
transform：translate(x,y); 基於原來的位置，沿X軸平移，長度為x，沿Y軸平移，長度為y
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>立方體</title> <style> #box2{ width:240px; height:240px; background-color:#aaf; display:inline-block; } #box1{ width:240px; height:60px; transform:skew(-45deg,0deg) translate(30px,0px); background-color: #eef; } #box3{ width:60px; height:240px; background: #ddf; display:inline-block; transform:skew(0deg,-45deg) translate(0,-30px); } </style> </head> <body> <div style="font-size:0px"> <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> </div> </body> </html>
表現效果
