其他分享
首页 > 其他分享> > CSS制作立方体

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>

标签:正方体,box,transform,li,rgba,立方体,制作,CSS,255
来源: https://blog.csdn.net/weixin_46367239/article/details/104742580