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

最新推荐文章于 2023-04-03 19:54:10 发布

_ouo_

最新推荐文章于 2023-04-03 19:54:10 发布

阅读量2.5k

点赞数

分类专栏： css3 html 前端文章标签： css HTML

本文链接：https://blog.csdn.net/zerogf/article/details/79096882

版权

前端同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

css3

6 篇文章 0 订阅

订阅专栏

个人博客链接：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>

_ouo_

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
如何用css写正方体或者长方体

个人博客链接：http://kingsman96.top/home 欢迎来访！！！！企业开发常用立方体条件：1.先把参照物转为3d。transform-style: preserve-3d;2.给参照物相对定位，给子元素绝对定位。3.旋转平移条件：第一个面给transform: rotateX(90deg) translateZ(100px)（元素总宽是200px）; 第二...
复制链接

扫一扫

专栏目录