运行效果：这里只存放了一张图片在这里插入图片描述
第一步：新建index.css，将以下代码复制粘贴

html {
	background: #000;
	height: 100%;
}


/*最外层容器样式*/

.wrap {
	position: relative;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 200px;
	height: 200px;
	margin: auto;
	/*改变左右上下,图片方块移动*/
}


/*包裹所有容器样式*/

.cube {
	width: 200px;
	height: 200px;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(-80deg);
	-webkit-animation: rotate 20s infinite;
	/*匀速*/
	animation-timing-function: linear;
}

@-webkit-keyframes rotate {
	from {
		transform: rotateX(0deg) rotateY(0deg);
	}
	to {
		transform: rotateX(360deg) rotateY(360deg);
	}
}

.cube div {
	position: absolute;
	width: 200px;
	height: 200px;
	opacity: 0.8;
	transition: all .4s;
}


/*定义所有图片样式*/

.pic {
	width: 200px;
	height: 200px;
}

.cube .out_front {
	transform: rotateY(0deg) translateZ(100px);
}

.cube .out_back {
	transform: translateZ(-100px) rotateY(180deg);
}

.cube .out_left {
	transform: rotateY(90deg) translateZ(100px);
}

.cube .out_right {
	transform: rotateY(-90deg) translateZ(100px);
}

.cube .out_top {
	transform: rotateX(90deg) translateZ(100px);
}

.cube .out_bottom {
	transform: rotateX(-90deg) translateZ(100px);
}


/*定义小正方体样式*/

.cube span {
	display: bloack;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50px;
	left: 50px;
}

.cube .in_pic {
	width: 100px;
	height: 100px;
}

.cube .in_front {
	transform: rotateY(0deg) translateZ(50px);
}

.cube .in_back {
	transform: translateZ(-50px) rotateY(180deg);
}

.cube .in_left {
	transform: rotateY(90deg) translateZ(50px);
}

.cube .in_right {
	transform: rotateY(-90deg) translateZ(50px);
}

.cube .in_top {
	transform: rotateX(90deg) translateZ(50px);
}

.cube .in_bottom {
	transform: rotateX(-90deg) translateZ(50px);
}


/*鼠标移入后样式*/

.cube:hover .out_front {
	transform: rotateY(0deg) translateZ(200px);
}

.cube:hover .out_back {
	transform: translateZ(-200px) rotateY(180deg);
}

.cube:hover .out_left {
	transform: rotateY(90deg) translateZ(200px);
}

.cube:hover .out_right {
	transform: rotateY(-90deg) translateZ(200px);
}

.cube:hover .out_top {
	transform: rotateX(90deg) translateZ(200px);
}

.cube:hover .out_bottom {
	transform: rotateX(-90deg) translateZ(200px);
}

第二步：新建index.html,将以下代码复制进去

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>css-3d旋转</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>

	<body>
		<!--/*外层最大容器*/-->
		<div class="wrap">
			<!--	/*包裹所有元素的容器*/-->
			<div class="cube">
				<!--前面图片 -->
				<div class="out_front">
					<img src="img/01.jpg" class="pic" />
				</div>
				<!--后面图片 -->
				<div class="out_back">
					<img src="img/02.jpg" class="pic" />
				</div>
				<!--左图片 -->
				<div class="out_left">
					<img src="img/03.jpg" class="pic" />
				</div>
				<div class="out_right">
					<img src="img/04.jpg" class="pic" />
				</div>
				<div class="out_top">
					<img src="img/05.jpg" class="pic" />
				</div>
				<div class="out_bottom">
					<img src="img/06.jpg" class="pic" />
				</div>
				<!--小正方体 -->
				<span class="in_front">
				<img src="img/07.jpg" class="in_pic" />
			</span>
				<span class="in_back">
			     <img src="img/08.jpg" class="in_pic" />
			</span>
				<span class="in_left">
				<img src="img/09.jpg" class="in_pic" />
			</span>
				<span class="in_right">
				<img src="img/10.jpg" class="in_pic" />
			</span>
				<span class="in_top">
				<img src="img/11.jpg" class="in_pic" />
			</span>
				<span class="in_bottom">
				<img src="img/12.jpg" class="in_pic" />
			</span>
			</div>
		</div>
	</body>
</html>

目录结构：在这里插入图片描述
最后：由于忘记所有代码出处，故自行写了一份。（注：代码非原创，如有侵权，请告知，将第一时间删除）

# html # css
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生