前言
三維變換使用基于二維變換的相同屬性，如果您熟悉二維變換，你們發(fā)現(xiàn)3D變形的功能和2D變換的功能類似。3D變形與2D變形的最大不同就在于其參考的坐標軸不同，2D變形的坐標軸是平面的，只存在X軸和Y軸，而3D變形的坐標軸則是X、Y、Z三條軸組成的立體空間，X軸正向是朝右，Y周正向是朝下，Z軸正向是朝屏幕外。
靜態(tài)效果圖如下：
實例代碼
| <!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <title>CSS3三維變形</title> <!-- --> <style type="text/css"> * { margin: 0; padding: 0; } .box { position:relative; top: 100px; width:300px; height: 300px; margin: 0 auto; background-color: #ccc; /* 透視效果 越大透視距離越平面，反之亦然 */ perspective:800px; } .content { /*3d視圖*/ transform-style: preserve-3d; /*過度動畫*/ transition: all 3s linear; width:200px; height: 200px; position: absolute; top: 50px; left: 50px; } /* 經過順時針旋轉 */ .content:hover { transform: rotateX(180deg) rotateY(180deg); } /* 方塊公共樣式 */ .side { position: absolute; height: 200px; width: 200px; border: 2px solid #000; background: rgba(0,0,0,0.3); color: #fff; line-height: 200px; font-size: 30px; font-weight: bold; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); } /* 前 */ .side1 { transform: translateZ(100px); } /* 后 */ .side2 { transform: rotateX(180deg) translateZ(100px); } /* 左 */ .side3 { transform: rotateY(-90deg) translateZ(100px); } /* 右 */ .side4 { transform: rotateY(90deg) translateZ(100px); } /* 上 */ .side5 { transform: rotateX(90deg) translateZ(100px); } /* 下 */ .side6 { transform: rotateX(-90deg) translateZ(100px); } </style> </head> <body> <!-- begin --> <div class="box"> <div class="content"> <div class="side side1">1</div> <div class="side side2">2</div> <div class="side side3">3</div> <div class="side side4">4</div> <div class="side side5">5</div> <div class="side side6">6</div> </div> </div> <!-- end --> </body></html> |
