利用css简单实现一个立方体效果 （结构性伪类选择器实现）

<style type="text/css">
	div,body,input,textarea,a,select,h1,h2,h3,h4,h5,h6,span,p,ul,ol,li,dl,dd,dt,form,table,span,img{
		margin:0;
		padding:0;
	}
	body,html{
		height: 100%;
	}
	.box{
		width: 300px;
		height: 300px;
		position: relative;
		margin: 100px;
		transform: rotateX(30deg) rotateY(-30deg);
		transform-style: preserve-3d;
	}
	.box:after{
		content: ".";
		height: 0;
		clear: both;
		overflow: hidden;
		display: block;
		visibility: hidden;
	}
	.box a{
		text-decoration: none;
		text-align: center;
		line-height: 200px;
		font-size: 35px;
		font-weight: bold;
		color: black;
		position: absolute;
		display: block;
		width: 200px;
		height: 200px;
		background: red;
		opacity: .4;
		transform-style: preserve-3d;
	}
	.box a:nth-child(1){
		background: #fe04ef;
		transform: translateZ(-100px);
	}
	.box a:nth-child(2){
		background: #0497fe;
		transform: translateZ(100px);
	}
	.box a:nth-child(3){
		background: #04fefb;
		transform: rotateY(90deg) translateZ(-100px);
	}
	.box a:nth-child(4){
		background: #fe2d04;
		transform: rotateY(-90deg) translateZ(-100px);
	}
	.box a:nth-child(5){
		background: #effe04;
		transform: rotateX(-90deg) translateZ(-100px);
	}
	.box a:nth-child(6){
		background: #04fe56;
		transform: rotateX(90deg) translateZ(-100px);
	}
</style>

<div class="box">
	<a href="#">前</a>
	<a href="#">后</a>
	<a href="#">左</a>
	<a href="#">右</a>
	<a href="#">上</a>
	<a href="#">下</a>
</div>

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓