html 图片展示 3d,利用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;

}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。