怎么利用CSS3制作3d半透明立方体-成都快上网建站

怎么利用CSS3制作3d半透明立方体

这篇文章主要讲解了“怎么利用CSS3制作3d半透明立方体”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么利用CSS3制作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;
	}
 
 



	
	
	
 

感谢各位的阅读,以上就是“怎么利用CSS3制作3d半透明立方体”的内容了,经过本文的学习后,相信大家对怎么利用CSS3制作3d半透明立方体这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


名称栏目:怎么利用CSS3制作3d半透明立方体
转载来于:http://kswjz.com/article/ggphcp.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流