CSS制作立方体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/*全局样式*/
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			html,body{
				height: 100%;
			}
			.box{
				width: 200px;
				height: 200px;
				position: absolute;/*把正方体定位在页面中心*/
				top: 0;bottom: 0;
				left: 0;right: 0;
				margin: auto; 
				transform-style: preserve-3d; /*设置3D空间*/
				transform: rotateX(-15deg) rotateY(-15deg);/*旋转角度，便于观察*/
			}
			/*每个li都是正方体的一面，通过定位重叠在一起*/
			.box li{
				width: 200px;
				height: 200px;
				position: absolute;
				top:0;left:0;
			}
			.box li:nth-child(1){
				background: rgba(255,0,0,.5);
			}
			/*以顶部中心点为原点，沿X轴旋转-90°，得到正方体上面*/
			.box li:nth-child(2){
				background: rgba(0,255,0,.5);
				transform-origin: top center;
				transform: rotateX(-90deg);
			}
			/*以底部中心点为原点，沿X轴旋转90°，得到正方体底面*/
			.box li:nth-child(3){
				background: rgba(0,0,255,.5);
				transform-origin: bottom center;
				transform: rotateX(90deg);
			}
			/*以左侧中心点为原点，沿Y轴旋转90°，得到正方体左面*/
			.box li:nth-child(4){
				background: rgba(255,255,0,.5);
				transform-origin: center left;
				transform: rotateY(90deg);
			}
			/*以顶部中心点为原点，沿Y轴旋转-90°，得到正方体右面*/
			.box li:nth-child(5){
				background: rgba(255,0,255,.5);
				transform-origin: center right;
				transform: rotateY(-90deg);
			}
			/*向后平移200px，得到正方体背面*/
			.box li:nth-child(6){
				background: rgba(0,255,255,.5);
				transform:translateZ(-200px)
			}
			/*注：这种方法得到的正方体，除正面以外，其余5个面都是以li的背面朝向外面，如正方体表面需设置样式，可通过互换上下、左右两个面的位置和旋转背面解决。*/
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
		</div>
	</body>
</html>
weixin_46367239
发布了2 篇原创文章 · 获赞 0 · 访问量 39
私信关注
猜你喜欢
