CSS實現3d半透明立方體

這次帶給大家CSS實現3d半透明立方體，CSS實現3d半透明立方體的注意事項有哪些，下面就是實戰案例，一起來看一下。

效果圖如下：

#範例程式碼：

 
 <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實現3d半透明立方體" ></p>
	<p><img  src="/static/imghwm/default1.png" data-src="2.jpg" class="lazy" alt="CSS實現3d半透明立方體" ></p>
	<p><img  src="/static/imghwm/default1.png" data-src="3.jpg" class="lazy" alt="CSS實現3d半透明立方體" ></p>
	<p><img  src="/static/imghwm/default1.png" data-src="4.jpg" class="lazy" alt="CSS實現3d半透明立方體" ></p>
	<p><img  src="/static/imghwm/default1.png" data-src="5.jpg" class="lazy" alt="CSS實現3d半透明立方體" ></p>
	<p><img  src="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" alt="CSS實現3d半透明立方體" ></p>
	
	
 

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

css的background-attachment進階使用方法

CSS3實作點擊放大的動畫實例

Bootstrap實作價格表

#

以上是CSS實現3d半透明立方體的詳細內容。更多資訊請關注PHP中文網其他相關文章！