話不多說，直接上**：
lang
="en"
>
>
charset
="utf-8"
>
rel=
"shortcut icon"
href
="fk.png"
>
>
css3d盒子title
>
>
html
.box
@keyframes xuanzhuan
100%
}.box>div
.front
.back
.left
.right
.top
.bottom
style
>
head
>
>
class
="box"
id="box"
>
class
="front"
>
div>
class
="back"
>
div>
class
="left"
>
div>
class
="right"
>
div>
class
="top"
>
div>
class
="bottom"
>
div>
div>
>
var box = document.
getelementbyid
("box");
var boxchild = box.children;
var liststyle =
["translatez(200px)"
,"translatez(-200px)"
,"rotatey(-90deg) translatez(-200px)"
,"rotatey(90deg) translatez(-200px)"
,"rotatex(-90deg) translatez(-200px)"
,"rotatex(90deg) translatez(-200px)"];
var listhtyle =
["translatez(100px)"
,"translatez(-100px)"
,"rotatey(90deg) translatez(100px)"
,"rotatey(-90deg) translatez(100px)"
,"rotatex(90deg) translatez(100px)"
,"rotatex(-90deg) translatez(100px)"];
box.
onmousemove
=function()
};box.
onmouseout
=function()
};//初始化
for(
let i=
0;i)script
>
body
>
html
>
游標觸碰前：
游標觸碰後：
公升級版3d盒子：
>
>
charset
="utf-8"
>
>
3dtitle
>
>
/* 所有元素都設定外邊距，內邊距為0 */
*/* 設定body背景位黑色 */
body
/* 設定包裝類 的高度，外邊距與父容器的距離 */
.wrap
/* 為立方體新增3d效果 */
.wrap .cube
/* 定義動畫，繞x,y,z軸旋轉 */
@keyframes box
100%
}/* big box 立方體的每乙個面水平居中,並為每個面設定了乙個動畫*/
.wrap .cube div
/* 5、設定立方體的每個面 */
.wrap .cube .front
.wrap .cube .back
.wrap .cube .right
.wrap .cube .left
.wrap .cube .top
.wrap .cube .bottom
/* 6、讓i居中，i使用同一張包裝立方體*/
.wrap .cube i
/* 立方體先用6張相同的包裹起來 */
.ifront
.iback
.iright
.ileft
.itop
.ibottom
/* 7、hover box，替換立方體的每乙個面的 */
.cube:hover .front
.cube:hover .back
.cube:hover .right
.cube:hover .left
.cube:hover .top
.cube:hover .bottom
style
>
head
>
>
class
="wrap"
>
class
="cube"
>
class
="front"
>
div>
class
="back"
>
div>
class
="right"
>
div>
class
="left"
>
div>
class
="top"
>
div>
class
="bottom"
>
div>
class
="ifront"
>
i>
class
="iback"
>
i>
class
="iright"
>
i>
class
="ileft"
>
i>
class
="itop"
>
i>
class
="ibottom"
>
i>
div>
body
>
html
>
css js實現3D魔方轉動
要實現類似3d轉動效果主要使用到css3的一些特性。下面主要介紹一些transform中的屬性的效果和作用 1.transform style 一般是塊級元素使用此屬性，使用了此屬性後的塊級元素會在保持3d效果，但是如果僅僅使用此屬性是不會看出3d特效的，必須和其他的屬性一起使用才能呈現出3d效果。...
CSS3實現3D盒子效果
近日，看到了css3中，設計動態立體盒子的例子，覺得比較新奇，所以研究了下，加以自己的拙見，設計了如圖所示的例子，拿來給大家分享 此圖為firefox下的截圖 這跟 3d盒子 的實現方式一樣，我的盒子也是以它為原型來設計的。整個盒子的html結構很簡單，如下 後下 左前上右 一，盒子定位 首先初始化...
3D轉換 兩面翻轉盒子和3d導航欄
3d轉換和2d轉換的最大區別就是，2d是二維座標系，是平面的，而3d是三維座標系，具有空間感 立體感。在3d轉換中，有兩個特別重要的屬性perspective transform style。perspective 透視，也叫視距，就是人眼距離螢幕的距離。距離螢幕越近 透視越小 物體越大，距離螢幕越...