html制作透明正方形,用css3简单的制作3d半透明立方体图片详解

new document

//css部分

html{

font-size:62.5%;

}

img{

width:300px;

height:300px;

}

#stage{

//搭建一个舞台

margin-top:200px;

margin-left:auto;

margin-right:auto;

width:300px;

height:300px;

perspective:1200px;

font-size:5em;

font-weight:bold;

color:#cc00ff;

}

.cube{

//cube是正方体

position:relative;

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

transform-style:preserve-3d;

transition: all .6s;

}

.side{

color:blue;

text-align:center;

width:300px;

height:300px;

line-height:300px;

position:absolute;

background:#cc66ff;

opacity:0.5;

border:1px solid rgba(117,4,24,0.5);

}

//.front到.bottom是6个面分别进行旋转，构建出正方体的整形

.front{

transform:translateZ(150px);

}

.back{

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

}

.left{

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

}

.right{

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

}

.top{

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

}

.bottom{

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

}

#stage:hover .cube{

//设置鼠标移上正方体时是否需要过渡效果以及过渡效果开始和结束的时间和速度

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

transition:transform .6s;

}

//p部分