效果图如下：
示例代码：
<ht ML >
<head>
<t IT le> new document </title>
< ;m eta n am e="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywo rds " content="" />
<meta name="description" content="" />
<meta charset="utf-8"/>
<style ty PE ="text/css">
//css部分
html{
font- Size: 62.5%;
}
img {
width:300px;
h ei ght:300px;
}
# stage{
//搭建一个舞台
m arg in -t op:200px;
mar gin -left:auto;
margin-right:auto;
width:300px;
height:300px;
perspective:1200px;
font -s ize:5em;
font-weight :bold;
color:#cc00ff;
}
.c ub e{
//cube是正方体
position:relative;
transform:rotateX(-45 deg ) rotateY(45deg);
transform-style: PR eserve-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;
}
</style>
</head>
<body>
<div id="stage">
<div class="cube">
<div class="side front"><img src="6.gif" alt="" /></div>
<div class="side back"><img src="2. jpg " alt="" /></div>
<div class="side left"><img src="3.jpg" alt="" /></div>
<div class="side right"><img src="4.jpg" alt="" /></div>
<div class="side top"><img src="5.jpg" alt="" /></div>
<div class="side bottom"><img src="1.jpg" alt="" /></div>
</div>
</div>
</body>
</html>
总结
以上就是这篇 文章 的全部内容了，希望本文的内容对大家的学习 或者 工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。
总结
以上是 为你收集整理的 利用CSS3制作简单的3d半透明立方体图片展示 全部内容，希望文章能够帮你解决 利用CSS3制作简单的3d半透明立方体图片展示 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于利用CSS3制作简单的3d半透明立方体图片展示的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did201397