如何利用css制作旋转魔方

最新推荐文章于 2022-06-05 19:17:06 发布

丰柏林

最新推荐文章于 2022-06-05 19:17:06 发布

阅读量383

点赞数 3

分类专栏： js前端文章标签：如何利用css做出旋转魔方旋转魔方的制作

js前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<style>
		/*最外层容器样式*/
		.wrap {
			width: 200px;
			height: 200px;
			margin: 200px;
			position: relative;
		}

		/*包裹所有容器样式*/
		.cube {
			width: 200px;
			height: 200px;
			margin: 0 auto;
			transform-style: preserve-3d;
			transform: rotateX(-30deg) rotateY(-80deg);
			animation: rotate linear 20s infinite;
		}

		@-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: block;
			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);
		}
	</style>
</head>

<body>
	<!-- 外层最大容器 -->
	<div class="wrap">
		<!--包裹所有元素的容器-->
		<div class="cube">
			<!--前面图片 -->
			<div class="out_front">
				<img src="https://img-blog.csdn.net/20170716094246620" class="pic" />
			</div>
			<!--后面图片 -->
			<div class="out_back">
				<img src="https://img-blog.csdn.net/20170716094334594" class="pic" />
			</div>
			<!--左面图片 -->
			<div class="out_left">
				<img src="https://img-blog.csdn.net/20170716094400013" class="pic" />
			</div>
			<!--右面图片 -->
			<div class="out_right">
				<img src="https://img-blog.csdn.net/20170716094422331" class="pic" />
			</div>
			<!--上面图片 -->
			<div class="out_top">
				<img src="https://img-blog.csdn.net/20170716094444434" class="pic" />
			</div>
			<!--下面图片 -->
			<div class="out_bottom">
				<img src="https://img-blog.csdn.net/20170716094504432" class="pic" />
			</div>

			<!--小正方体 -->
			<span class="in_front">
				<img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" />
			</span>
			<span class="in_back">
			     <img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" />
			</span>
			<span class="in_left">
				<img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" />
			</span>
			<span class="in_right">
				<img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" />
			</span>
			<span class="in_top">
				<img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" />
			</span>
			<span class="in_bottom">
				<img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" />
			</span>
		</div>

	</div>
</body>

</html>
--------------------- 
作者：FEWY 
来源：CSDN 
原文：https://blog.csdn.net/FE_dev/article/details/75142505 
版权声明：本文为博主原创文章，转载请附上博文链接！

丰柏林

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
如何利用css制作旋转魔方

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;style&gt; /*最外层容器样式*/ .wrap { width: 200px; height: 200px; margin: 200px; position: relative; }...
复制链接

扫一扫

专栏目录