使用css3?

Tags: 盒子,

等了這麼久，牛lan器大戶某60發佈8.0beta版後終於開始支持css3d了。本文主要講的是如何使用css3 的3d屬性製作一個的3d盒子模型。再也不需要2d那樣藉助各種算斜切角旋轉角了。只需要幾句代碼輕鬆搞定。css3 3d盒子可以用在商品的立體展示等方面。

工具/原料

支持css3 3d的牛lan器（防和諧）。

jquery-1.11.1.js

基礎知識

一、首先先了解css3d的座標系構成。

x軸方向是從瀏覽器左上角開始往右邊增大，y軸方向是從瀏覽器左上角往下邊增大。z軸方向是垂直於屏幕平面往屏幕前面增大。如下圖

二、transform-style:preserve-3d; 要使用css3d，則必須在這個元素上加上此屬性。表示其所有的子元素將會在3d空間中呈現。（為了兼容，左右3d屬性前面都最好加上-webkit-，-o-，-moz-，-ms-等，下同）

三、perspective: number none; perspective是透視的意思。屬性值可以是none（表示不設置透視，默認值）或者多少px。比如我們畫一個正方體，假如不設置透視則這個正方體的對面之間相互平行，假如設置透視則表示從遠處看物體，則肯定不再平行了。如下圖，左邊是沒有透視的，右邊是有透視的。

四、perspective-origin: x-axis y-axis;表示3d元素的基準點。比如此元素（不是子元素）的旋轉、平移等都是以perspective-origin為基點的。x和y值默認都是50%（表示以元素的中心為開始）

開始製作

首先建立一個父div，然後再父div裡邊建立6個span，如下圖

接著給父元素類box和子元素類face添加上基本的樣式。父元素和子元素都是寬高為200px的正方形，子元素相對於父元素絕對定位都重疊在一起。

接著單獨設置上面的css，如下圖右。原理圖如下圖左。（注：每個元素在transform的時候都是相對於自己的座標系而不是父座標系，而且默認基準點是在元素的中心，比如下圖中rotateX的X軸始終是平行於那個面的寬的方向，translateZ的Z軸始終是垂直於那個面的方向，Y軸始終是平行於那個面的高的方向）