要用css3實現3d效果，先看個圖
perspective設定景深，也就是z軸的距離。
perspective-origin:設定視角，不同視角看到同乙個立體是不同的表現。
設定好這些，就可以構建你想要的，立體圖形，在構建前，構建前生成容器，要讓容器內元素也保持3d效果，就要在樣式新增transform-style: preserve-3d;
定義容器內元素位置，用到transform，tranform屬性很多不多說了，可以查下**有詳細介紹，這裡主要說兩個屬性：第一rotatez(val),以z軸為中心旋轉，val是角度單位deg,例如：rotatez(90deg),以z軸為中心，旋轉90度。rotatey(),rotatex()也是可疑的就不多說了。第二個，translatez(val)偏移，這個是沿著z軸的偏移，val這裡面是距離，比如translatez(100px)沿z軸偏移100畫素，當然這裡要設好景深,景深：偏移量，景深一定，偏移量越大效果越明顯，感覺距離很遠，影象拉伸的很厲害。
下面是**例項：樣式：
helloworld
.bgl
.titlea
.titlea>div
.titlea>div:nth-child(1)
.titlea>div:nth-child(2)
.titlea>div:nth-child(3)
@keyframes move
100%
} @keyframes movedown
50%
} @keyframes moveover
25%50%
75%
}
參考：
CSS3實現3D立體效果
css3實現3d效果 1.涉及到的幾個css3屬性 首先大家需要了解transform屬性，主要有平移 translate 縮放 scale 拉伸 skew 旋轉 rotate 這裡涉及到3d轉換的主要介紹旋轉。下面通過一組rotate效果直觀理解rotatex,rotatey,rotatez區別。...
CSS3實現3D盒子效果
近日，看到了css3中，設計動態立體盒子的例子，覺得比較新奇，所以研究了下，加以自己的拙見，設計了如圖所示的例子，拿來給大家分享 此圖為firefox下的截圖 這跟 3d盒子 的實現方式一樣，我的盒子也是以它為原型來設計的。整個盒子的html結構很簡單，如下 後下 左前上右 一，盒子定位 首先初始化...
css3的3D位移效果講解
lang en charset utf 8 3d位移的demotitle perspective 定義3d元素距離檢視的距離 以畫素為單位 當給乙個元素定義perspective屬性的時候，其 子元素 就獲得了乙個透視效果，元素本身並沒有 設定人眼到螢幕平面的距離，只影響3d元素，不影響2d元素 所...