用CSS3画出一个正方体

最新推荐文章于 2023-03-13 22:43:54 发布

nn_nn_n

最新推荐文章于 2023-03-13 22:43:54 发布

阅读量249

点赞数

本文链接：https://blog.csdn.net/nn_nn_n/article/details/100302515

版权

1.html代码

<div class="box">
		<ul>
			<li>上</li>
			<li>下</li>
			<li>左</li>
			<li>右</li>
			<li>前</li>
			<li>后</li>
		</ul>
	</div>

2.父元素定义的属性

* {
			margin: 0;
			padding: 0;
		}
		.box {
			width: 600px;
			height: 600px;
			background: #eee;
			position: relative;
			margin: 0 auto;
			perspective: 500px;  /*定义 3D 元素距视图的距离，子元素会获得透视效果*/

		}
		.box ul {
			width: 300px;
			height: 300px;
			border:1px #000 solid;
			list-style: none;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			transform-style: preserve-3d;  /*子元素将保留其 3D 位置*/
		}

3.子元素定义的属性

.box ul li{
			width: 300px;
			height: 300px;
			text-align: center;
			line-height: 300px;
			font-size: 48px;
			position: absolute;
		}
		.box ul li:nth-child(1){
			background:red;
			transform: translateY(-150px) rotateX(90deg);

		}
		.box ul li:nth-child(2){
			background:rgba(0,255,0,.5);
			transform: translateY(150px) rotateX(-90deg);
		}
		.box ul li:nth-child(3){
			background:rgba(0,0,255,.5);
			transform: translateX(-150px) rotateY(-90deg);
		}
		.box ul li:nth-child(4){
			background:rgba(255,255,0,.5);
			transform: translateX(150px) rotateY(90deg);
		}
		.box ul li:nth-child(5){
			background:rgba(255,0,255,.5);
			transform: translateZ(150px) ;
		}
		.box ul li:nth-child(6){
			background:rgba(0,255,255,.5);
			transform: translateZ(-150px) rotateY(180deg) ;
		}