HTM+CSS实现立方体图片旋转展示效果

最新推荐文章于 2022-01-04 09:20:38 发布

hi come

最新推荐文章于 2022-01-04 09:20:38 发布

阅读量1.6k

点赞数 3

分类专栏： HTML 文章标签： HTML CSS

本文链接：https://blog.csdn.net/alger_magic/article/details/98210165

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

目的：HTM+CSS实现立方体图片旋转展示效果

环境：

系统：Win10
环境：

一、示例1。

话不多说直接上代码

<html>
	<head>
		<style>
			/*立方体效果*/
			.wrap {
			width: 120px;
			height: 200px;
			margin: 20px;
			position: fixed;
			top: 100px;
			left: 200px;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			z-index: 22;
			}

			.cube {
			width: 120px;
			height: 120px;
			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: 120px;
				height: 120px;
				opacity: 0.8;
				transition: all .4s;
			}

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

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

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

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

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

			.cube .out_bottom {
				transform: rotateX(-90deg) translateZ(60px);
			}
		</style>
	</head>
	
	<body>
		<div class="wrap">
			<div class="cube">
				<div class="out_front"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube01.bmp" class="pic"></div>
				<div class="out_back"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube02.bmp" class="pic"></div>
				<div class="out_left"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube03.bmp" class="pic"></div>
				<div class="out_right"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube04.bmp" class="pic"></div>
				<div class="out_top"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube05.bmp" class="pic"></div>
				<div class="out_bottom"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube06.bmp" class="pic"></div>
			</div>
		</div>
	</body>
</html>

效果图：
在这里插入图片描述

一、示例2，增大立方体。

话不多说直接上代码

<html>
	<head>
		<style>
			/*立方体效果*/
			.wrap {
			width: 800px;
			height: 600px;
			margin: 20px;
			position: fixed;
			top: 100px;
			left: 200px;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			z-index: 22;
			}

			.cube {
			width: 600px;
			height: 600px;
			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: 600px;
				height: 600px;
				opacity: 0.8;
				transition: all .4s;
			}

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

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

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

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

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

			.cube .out_bottom {
				transform: rotateX(-90deg) translateZ(300px);
			}
		</style>
	</head>
	
	<body>
		<div class="wrap">
			<div class="cube">
				<div class="out_front"><img src="http://pic.sc.chinaz.com/files/pic/pic9/201906/zzpic18408.jpg" class="pic" height="600" width="600" ></div>
				<div class="out_back"><img src="http://pic.sc.chinaz.com/files/pic/pic9/201907/zzpic18997.jpg" class="pic" height="600" width="600" ></div>
				<div class="out_left"><img src="http://pic.sc.chinaz.com/files/pic/pic9/201907/zzpic19237.jpg" class="pic" height="600" width="600" ></div>
				<div class="out_right"><img src="http://pic.sc.chinaz.com/files/pic/pic9/201907/zzpic19021.jpg" class="pic" height="600" width="600" ></div>
				<div class="out_top"><img src="http://pic.sc.chinaz.com/files/pic/pic9/201907/zzpic18835.jpg" class="pic" height="600" width="600"></div>
				<div class="out_bottom"><img src="http://pic.sc.chinaz.com/files/pic/pic9/201906/zzpic18480.jpg" class="pic" height="600" width="600"></div>
			</div>
		</div>
	</body>
</html>

效果图：
在这里插入图片描述

一、示例3。

话不多说直接上代码

<html>
   <head>
		<meta charset="utf-8" />
		<title>CSS3制作3D图片立方体旋转特效</title>

		<style type="text/css">
		html{
		  background:linear-gradient(#fc0 0%,#F80 80%);
		  height: 100%;   
		}

		.wrap{
		  width: 650px;
		  height: 200px;
		  margin: 150px 360px;
		  position: relative;
		   
		}
		.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);
		}
 

		</style> 
	</head>
	
	<body>
		 <!--/*外层最大容器*/-->
		 <div class="wrap">
			 <!--    /*包裹所有元素的容器*/-->
			 <div class="cube">
				 <!--前面图片 -->
				 <div class="out_front">
					 <img src="./img/1.jpg"  class="pic">
				 </div>
				 <!--后面图片 -->
				 <div class="out_back">
					 <img src="./img/2.jpg"  class="pic">
				 </div>
				 <!--左图片 -->
				 <div class="out_left">
					 <img src="./img/3.jpg"  class="pic">
				 </div>
				 <div class="out_right">
					 <img src="./img/4.jpg" class="pic">
				 </div>
				 <div class="out_top">
					 <img src="./img/5.jpg"  class="pic">
				 </div>
				 <div class="out_bottom">
					 <img src="./img/6.jpg"  class="pic">
				 </div>
				 <!--小正方体 -->
				 <span class="in_front">
					 <img src="./img/7.jpg" class="in_pic" />
				 </span>
				 <span class="in_back">
					  <img src="./img/8.jpg" class="in_pic" />
				 </span>
				 <span class="in_left">
					 <img src="./img/9.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>

效果图：
在这里插入图片描述

更多延申参考：https://www.cnblogs.com/zyrblog/p/11142624.html

hi come

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTM+CSS实现立方体图片旋转展示效果

目的：HTM+CSS实现立方体图片旋转展示效果环境：系统：Win10环境：一、示例1。话不多说直接上代码<html> <head> <style> /*立方体效果*/ .wrap { width: 120px; height: 200px; margin: 20px; position: fixed; ...
复制链接

扫一扫