如何用css写正方体或者长方体

个人博客链接：http://kingsman96.top/home 欢迎来访！！！！

企业开发常用立方体
条件：
1.先把参照物转为3d。transform-style: preserve-3d;
2.给参照物相对定位，给子元素绝对定位。
3.旋转平移条件：
第一个面给transform: rotateX(90deg) translateZ(100px)（元素总宽是200px）;
第二个面设置transform: rotateX(180deg) translateZ(100px);
第三个面设置transform: rotateX(270deg) translateZ(100px);
第四个面设置transform: rotateX(360deg) translateZ(100px);
第五个面设置transform: translateX(-100px) rotateY(90deg);
第六个面设置transform: translateX(100px) rotateY(90deg) ;
4.给参照物父元素设置transform: rotateY(0deg) rotateX(0deg);旋转调试看效果。

把正方体怎么变成长方体？
第一个面给transform: rotateX(90deg) translateZ(100px) scale（2,1）；（元素总宽是200px）;
第二个面设置transform: rotateX(180deg) translateZ(100px) scale（2,1）;
第三个面设置transform: rotateX(270deg) translateZ(100px) scale（2,1）;
第四个面设置transform: rotateX(360deg) translateZ(100px) scale（2,1）;
第五个面设置transform: translateX(-200px) rotateY(90deg);
第六个面设置transform: translateX(200px) rotateY(90deg) ;

4.给参照物父元素设置transform: rotateY(0deg) rotateX(0deg);

旋转调试看效果。

5、HTML代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			ul{
				width: 200px;
				height: 200px;
				/*border: 1px solid;*/
				margin: 100px auto;
				position: relative;
				transform-style: preserve-3d;
				transform: rotateX(0deg) rotateY(0deg);
			}
			ul li{
				width: 200px;
				list-style: none;
				text-align: center;
				line-height: 200px;
				height: 200px;
				position: absolute;
			}
			ul li:nth-child(1){
				background: orange;
				transform: rotateX(90deg) translateZ(100px);
			}
			ul li:nth-child(2){
				background-color: orangered;
				transform: rotateX(180deg) translateZ(100px);
			}
			ul li:nth-child(3){
				background: yellow;
				transform: rotateX(270deg) translateZ(100px);
			}
			ul li:nth-child(4){
				background: purple;
				transform: rotateX(360deg) translateZ(100px);
				
			}
			ul li:nth-child(5){
				background: yellowgreen;
				transform: translateX(-100px) rotateY(90deg);
			}
			ul li:nth-child(6){
				background: paleturquoise;
				transform: translateX(100px) rotateY(90deg);
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</body>
</html>

赫本的猫

发布了25 篇原创文章 · 获赞 13 · 访问量 5万+

私信关注

如何用css写正方体或者长方体

猜你喜欢