html 实现3d效果代码,纯CSS实现3D的代码

一、正方体

我认为正方体可以算是3D图像的基础吧，首先正方体是由六个相同的面所组成，其次就需要我们依次构造。(据体构造在代码中)

代码如下：

正方体

.d3{

height:300px;

width:300px;

perspective:800px;

margin:140pxauto;

border:1pxsolid#ccc;}

.stage{

height:300px;

width:300px;

transform-style:preserve-3d;

position:relative;

transform:rotateX(45deg)rotateY(45deg);

}

.role{

height:300px;

width:300px;

position:absolute;

}

.stage{

animation:dong3slinearinfinite;(这是舞台)

}

.stage:hover{

animation:paused;

}

@keyframesdong{(这是使舞台旋转的动画)

from{

transform:rotateX(45deg)rotateY(45deg);

}

to{

transform:rotateX(405deg)rotateY(405deg);

}

}

.di1{(正方体的前面)

background:rgb(21,163,52);

transform:translateZ(150px);(沿着z轴向前移动150px)

font-size:100px;

font-family:KaiTi;

text-align:center;

line-height:300px;

}

.di2{(正方体的后面)

background:blue;

transform:translateZ(-150px)rotateY(180deg);(沿着z轴向前移动150px然后沿着y轴旋转180°*注意顺序哦是先移动后旋转)

font-size:100px;

font-family:KaiTi;

text-align:center;

line-height:300px;

}

.di3{(正方体的左面)

background:purple;

transform:rotateY(-90deg)translateZ(150px);

font-size:100px;

font-family:KaiTi;

text-align:center;

line-height:300px;

}

.di4{(正方体的右面)

background:pink;

transform:rotateY(90deg)translateZ(150px);

font-size:100px;

font-family:KaiTi;

text-align:center;

line-height:300px;

}

.di5{(正方体的上面)

background:red;

transform:rotateX(90deg)translateZ(150px);

font-size:100px;

font-family:KaiTi;

text-align:center;

line-height:300px;

}

.di6{(正方体的下面)

background:yellow;

transform:rotateX(-90deg)translateZ(150px);

font-size:100px;

font-family:KaiTi;

text-align:center;

line-height:300px;

}

(将正方体分为六个相同的面)

前

后

左