css3制作立方体

最新推荐文章于 2022-06-01 12:10:13 发布

nizhanxue

最新推荐文章于 2022-06-01 12:10:13 发布

阅读量181

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/nizhanxue/article/details/104716917

版权

css3 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

css3制作立方体

1，建立结构

建立6个宽高为100px的正方形，调整ul在页面的位置，分别设置不同li里的背景色。为了方便区分，在li里设置数字显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		ul,li{width: 100px;
			height: 100px;/*设置宽高*/}
		ul{position: absolute;
			left:0;right:0;top:0;bottom:0;/*使ul在页面中水平垂直居中*/
			margin:auto;}
		li{list-style: none;/*去除列表样式*/
			font-size: 40px;
			line-height: 100px;
			text-align: center;设置li的文本样式
			position:absolute; }
		li:nth-child(1){background:pink;}
		li:nth-child(2){background: red;}
		li:nth-child(3){background:green;}
		li:nth-child(4){background:blue;}
		li:nth-child(5){background:yellow;}
		li:nth-child(6){background:orange;}
	</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>

在这里插入图片描述

2，分别给6个li使用绝对定位

使用绝对定位的目的是为了让6个li分别显示在围成正方体所需的位置上。

li{list-style: none;/*去除列表样式*/
			font-size: 40px;
			line-height: 100px;
			text-align: center;/*设置li的文本样式*/
			position:absolute; }
		li:nth-child(1){background:pink;
			top:0;/*第一个li不动*/}
		li:nth-child(2){background: red;
			top:-50px;/*让第二个li向上移动50px*/}
		li:nth-child(3){background:green;
			bottom:-50px;/*让第三个li向下移动50px*/}
		li:nth-child(4){background:blue;
			left:-50px;/*让第四个li向左移动50px*/}
		li:nth-child(5){background:yellow;
			right:-50px;/*让第二个li向右移动50px*/}
		li:nth-child(6){background:orange;/*第六个li不动*/}

在这里插入图片描述

3.建立3D空间

属性：transform-style 设置3D空间
属性值：flat 处在2D空间
preserve-3d 处在3D空间
将ul设置为3D空间。

ul{position: absolute;
			left:0;right:0;top:0;bottom:0;/*使ul在页面中水平垂直居中*/
			margin:auto;
			transform-style: preserve-3d;/*将ul设置成3D空间*/}

4.设置li在3D空间里的位置

属性：transform：translate() 位移
		transform：translateX() 沿X轴位移
		transform：translateY() 沿Y轴位移
		transform：translateZ()沿Z轴 位移

		transform:rotate(）旋转
			transform:rotateX(）沿X轴旋转
			transform:rotateY(）沿Y轴旋转
			transform:rotateZ(）沿Z轴旋转

2、3、4、5、6这些li方块要向Z轴的负方向位移50px,
第一个li向Z轴正方向位移50px,
2沿x轴旋转90度
3沿X轴旋转-90度
4沿y轴旋转90度
5沿y轴旋转-90度

	li:nth-child(1){background:pink;
			top:0;/*第一个li不动*/
			transform: translateZ(50px);/*沿Z轴正方向位移50px*/}
		li:nth-child(2){background: red;
			top:-50px;/*让第二个li向上移动50px*/
			transform:translateZ(-50px);/*沿Z轴负方向位移50px*/
			transform: rotateX(90deg);/*沿X轴旋转90度*/}
		li:nth-child(3){background:green;
			bottom:-50px;/*让第三个li向下移动50px*/
			transform:translateZ(-50px);/*沿Z轴负方向位移50px*/
			transform: rotateX(-90deg);/*沿X轴旋转-90度*/}
		li:nth-child(4){background:blue;
			left:-50px;/*让第四个li向左移动50px*/
			transform:translateZ(-50px);/*沿Z轴负方向位移50px*/
			transform: rotateY(90deg);/*沿Y轴旋转90度*/}
		li:nth-child(5){background:yellow;
			right:-50px;/*让第五个li向右移动50px*/
			transform:translateZ(-50px);/*沿Z轴负方向位移50px*/
			transform: rotateY(-90deg);/*沿Y轴旋转-90度*/}
		li:nth-child(6){background:orange;/*第六个li不动*/
			transform:translateZ(-50px);/*沿Z轴负方向位移50px*/}

在这里插入图片描述
完成正方体的制作

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		ul,li{width: 100px;
			height: 100px;/*设置宽高*/}
		ul{position: absolute;
			left:0;right:0;top:0;bottom:0;/*使ul在页面中水平垂直居中*/
			margin:auto;
			transform-style: preserve-3d;/*将ul设置成3D空间*/
			animation:play 30s linear infinite;}
		li{list-style: none;/*去除列表样式*/
			font-size: 40px;
			line-height: 100px;
			text-align: center;/*设置li的文本样式*/
			position:absolute; }
		li:nth-child(1){background:pink;
			top:0;/*第一个li不动*/
			transform: translateZ(50px);/*沿Z轴正方向位移50px*/}
		li:nth-child(2){background: red;
			top:-50px;/*让第二个li向上移动50px*/
			transform:translateZ(-50px);/*沿Z轴负方向位移50px*/
			transform: rotateX(90deg);/*沿X轴旋转90度*/}
		li:nth-child(3){background:green;
			bottom:-50px;/*让第三个li向下移动50px*/
			transform:translateZ(-50px);/*沿Z轴负方向位移50px*/
			transform: rotateX(-90deg);/*沿X轴旋转-90度*/}
		li:nth-child(4){background:blue;
			left:-50px;/*让第四个li向左移动50px*/
			transform:translateZ(-50px);/*沿Z轴负方向位移50px*/
			transform: rotateY(90deg);/*沿Y轴旋转90度*/}
		li:nth-child(5){background:yellow;
			right:-50px;/*让第五个li向右移动50px*/
			transform:translateZ(-50px);/*沿Z轴负方向位移50px*/
			transform: rotateY(-90deg);/*沿Y轴旋转-90度*/}
		li:nth-child(6){background:orange;/*第六个li不动*/
			transform:translateZ(-50px);/*沿Z轴负方向位移50px*/}
		@keyframes play{
				from{transform: rotateY(0deg) rotateX(0deg);}
				to{transform: rotateY(360deg) rotateX(360deg);}}

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

逆战班

nizhanxue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3制作立方体

css3制作立方体1，建立结构建立6个宽高为100px的正方形，调整ul在页面的位置，分别设置不同li里的背景色。为了方便区分，在li里设置数字显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title&gt...
复制链接

扫一扫

专栏目录