CSS to implement 3d translucent cube

This time I will bring you CSS to implement a 3D translucent cube. What are the precautions to implement a 3D translucent cube with CSS? The following is a practical case, let's take a look.

The rendering is as follows:

Sample code:

 
 <title> new document </title>
 <meta>
 <meta>
 <meta>
 <meta>
 <meta>
 <style>
//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;
	}
 </style>
 

	<p>
	</p><p>
	</p><p><img  src="/static/imghwm/default1.png" data-src="6.gif" class="lazy" alt="CSS to implement 3d translucent cube" ></p>
	<p><img  src="/static/imghwm/default1.png" data-src="2.jpg" class="lazy" alt="CSS to implement 3d translucent cube" ></p>
	<p><img  src="/static/imghwm/default1.png" data-src="3.jpg" class="lazy" alt="CSS to implement 3d translucent cube" ></p>
	<p><img  src="/static/imghwm/default1.png" data-src="4.jpg" class="lazy" alt="CSS to implement 3d translucent cube" ></p>
	<p><img  src="/static/imghwm/default1.png" data-src="5.jpg" class="lazy" alt="CSS to implement 3d translucent cube" ></p>
	<p><img  src="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" alt="CSS to implement 3d translucent cube" ></p>
	
	
 

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Advanced usage of background-attachment in css

CSS3 animation example to achieve click-to-enlarge

Bootstrap implementation price list

The above is the detailed content of CSS to implement 3d translucent cube. For more information, please follow other related articles on the PHP Chinese website!