CSS制作立方体

2020-03-09 09:07:56 阅读：257 来源： 互联网

标签：正方体 box transform li rgba 立方体制作 CSS 255

<!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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS制作立方体