3D立方体旋转相册

最新推荐文章于 2021-08-18 23:55:07 发布
最新推荐文章于 2021-08-18 23:55:07 发布
阅读量149 收藏
点赞数
分类专栏： css
blank
本文链接：https://blog.csdn.net/qq_41418797/article/details/107683614
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>萤火虫</title>
		<style>
			body{
	background: black;
	width: 100%;
	height: 100%;
	overflow: hidden;
	
}
#wrap{
	width:140px;
	height: 200px;
	margin: 20% auto 0;
	position: relative;
	top:-100px;
	transform-style:preserve-3d;
	transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
}
#wrap ul li{
	list-style: none;
	position: absolute;
	top: 0;left: 0;
	height: 180px;
	width: 120px;
	border-radius: 3px;/*给div元素添加圆角的边框*/
	box-shadow:0 0 10px #fff; /*向 div 元素添加阴影*/
	background-size: 100%;
	transform:rotateY(0deg) translateZ(0px);
	/*-webkit-box-reflect来做倒影:box-reflect属性值有：dirrection-方向:above向上，below向下，left向左，right向右。
	 * offset距离：可以是数值，也可以是百分比;
	   mask-box-image设置倒影的遮罩图像：（1）url （2）linear-gradient线性渐变创建遮罩图像。（3）repeating-linear-gradient重复线性渐变创建遮罩图像。（4）repeating-url重复径向径向渐变创建遮罩图像。
	   linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片
	   linear-gradient()与-webkit-linear-gradient()是相反的*/
	   /* 渐变轴为45度，从蓝色渐变到红色   linear-gradient(45deg, blue, red); */
		/* 从右下到左上、从蓝色渐变到红色    linear-gradient(to left top, blue, red);*/
		/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束    linear-gradient(0deg, blue, green 40%, red);*/
	-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);	
}

#wrap p{
	width: 1200px;
	height: 1200px;
	position: absolute;
	top:100%;left: 50%;
	border-radius: 100%;
	/* radial-gradient: 径向渐变 指从一个中心店开始沿着四周产生渐变效果。
语法：<radial-gradient> = radial-gradient([<shape>||<size>][at <position>]?,|[at<position>]?<color-stop>[,<color-stop>]+);
    1- <position>确定圆心的位置，提供2个参数，第一个表示横坐标，第二个表示纵坐标；
    如果只提供一个，第二个默认为50%，即center。
    2- shape：渐变的形状，ellipse表示椭圆，circle表示园型。默认ellipse，
    如果元素形状是正方形的元素，则ellipse和circle显示一样。
    如果宽高不一样，默认效果切换到ellipse。
    3- size：渐变的大小，即渐变从哪里到哪里停止，它有4个值。
    colsest-side:最近边
    farthest-side:最远边
    closet-corner:最近角
    farthest-corner:最远角，默认值。
    4- <color>指定颜色额，rgba或hsla */
	background:-webkit-radial-gradient(45deg,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));
	transform:rotateX(90deg);}
}

		</style>
		<script src="js/jquery-1.11.3.min.js"></script>
		<script>
		$(function(){
			var oL = $('#wrap ul li').size();
			var Deg = 360/oL;
			var xDeg = 0,yDeg = -10,xs = 0,ys = 0,p=null;

			for (var i=oL-1;i>=0;i--)
			{
				
				$('#wrap ul li').eq(i).css({
					transition:"1s "+(oL-i)*0.15+"s transform,.5s "+(1+oL*0.15)+"s opacity",
					'transform':'rotateY('+Deg*i+'deg) translateZ(350px)'
				});
			}
				
			
			$(document).mousedown(function(e){
				clearInterval(p);
				var x1 = e.clientX;
				var y1 = e.clientY;
				$(this).bind('mousemove',function(e){
					xs = e.clientX - x1;
					ys = e.clientY - y1;
					x1 = e.clientX;
					y1 = e.clientY;
					xDeg += xs*0.3;
					yDeg -= ys*0.1;
					console.log( xs )
					$('#wrap').css('transform',"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");
				});
			}).mouseup(function(){
				$(this).unbind('mousemove');
				p = setInterval(function(){
					if(Math.abs(xs)<0.5&&Math.abs(ys)<0.5){clearInterval(p)};
					xs = xs*0.95;
					ys = ys*0.95
					xDeg += xs*0.3;
					yDeg -= ys*0.1;
					$('#wrap').css('transform',"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");
					console.log(xs+','+ys);
				},30);
			});
		
		});
		</script>
	</head>
	<body>
		<div id="wrap">
			<ul>
				<li style="background-image: url(img/1.jpg);"></li>
				<li style="background-image: url(img/2.jpg);"></li>
				<li style="background-image: url(img/3.jpg);"></li>
				<li style="background-image: url(img/4.jpg);"></li>
				<li style="background-image: url(img/5.jpg);"></li>
				<li style="background-image: url(img/6.jpg);"></li>
				<li style="background-image: url(img/7.jpg);"></li>
				<li style="background-image: url(img/8.jpg);"></li>
				<li style="background-image: url(img/9.jpg);"></li>
				<li style="background-image: url(img/10.jpg);"></li>
			</ul>
			<p></p>
		</div>
	</body>
</html>

效果演示1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D魔方动画 </title>

<style>
	html{
	background:cornsilk;
    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);
}
</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/1.jpg" class="in_pic" />
			</span>
			<span class="in_bottom">
				<img src="img/2.jpg" class="in_pic" />
			</span>
		</div>
		</div>
	</body>

</html>

效果演示2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS立方体加载动画</title>


<style>
body {
  font-family: 'Roboto', sans-serif;
  background-color:darkgray;
				background-image: linear-gradient(335deg, #000 23px, transparent 23px),
				linear-gradient(155deg, #000 23px, transparent 23px),
				linear-gradient(335deg, #000 23px, transparent 23px),
				linear-gradient(155deg, #000 23px, transparent 23px);
				background-size: 58px 58px; 
				background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin:270px auto;
  width: 50%;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotateX(-37.5deg) rotateY(45deg);
            transform: rotateX(-37.5deg) rotateY(45deg);
  }
  50% {
    -webkit-transform: rotateX(-37.5deg) rotateY(405deg);
            transform: rotateX(-37.5deg) rotateY(405deg);
  }
  100% {
    -webkit-transform: rotateX(-37.5deg) rotateY(405deg);
            transform: rotateX(-37.5deg) rotateY(405deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotateX(-37.5deg) rotateY(45deg);
            transform: rotateX(-37.5deg) rotateY(45deg);
  }
  50% {
    -webkit-transform: rotateX(-37.5deg) rotateY(405deg);
            transform: rotateX(-37.5deg) rotateY(405deg);
  }
  100% {
    -webkit-transform: rotateX(-37.5deg) rotateY(405deg);
            transform: rotateX(-37.5deg) rotateY(405deg);
  }
}
.cube, .cube * {
  position: absolute;
  width: 151px;
  height: 151px;
}

.sides {
  -webkit-animation: rotate 3s ease infinite;
          animation: rotate 3s ease infinite;
  -webkit-animation-delay: .8s;
          animation-delay: .8s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(-37.5deg) rotateY(45deg);
          transform: rotateX(-37.5deg) rotateY(45deg);
}

.cube .sides * {
  box-sizing: border-box;
 
}

.cube .sides .top {
  -webkit-animation: top-animation 3s ease infinite;
          animation: top-animation 3s ease infinite;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
  -webkit-transform: rotateX(90deg) translateZ(150px);
          transform: rotateX(90deg) translateZ(150px);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 40%,rgba(255,255,255,0.8));
}
@-webkit-keyframes top-animation {
  0% {
    opacity: 1;
    -webkit-transform: rotateX(90deg) translateZ(150px);
            transform: rotateX(90deg) translateZ(150px);
  }
  20% {
    opacity: 1;
    -webkit-transform: rotateX(90deg) translateZ(75px);
            transform: rotateX(90deg) translateZ(75px);
  }
  70% {
    opacity: 1;
    -webkit-transform: rotateX(90deg) translateZ(75px);
            transform: rotateX(90deg) translateZ(75px);
  }
  90% {
    opacity: 1;
    -webkit-transform: rotateX(90deg) translateZ(150px);
            transform: rotateX(90deg) translateZ(150px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(90deg) translateZ(150px);
            transform: rotateX(90deg) translateZ(150px);
  }
}
@keyframes top-animation {
  0% {
    opacity: 1;
    -webkit-transform: rotateX(90deg) translateZ(150px);
            transform: rotateX(90deg) translateZ(150px);
  }
  20% {
    opacity: 1;
    -webkit-transform: rotateX(90deg) translateZ(75px);
            transform: rotateX(90deg) translateZ(75px);
  }
  70% {
    opacity: 1;
    -webkit-transform: rotateX(90deg) translateZ(75px);
            transform: rotateX(90deg) translateZ(75px);
  }
  90% {
    opacity: 1;
    -webkit-transform: rotateX(90deg) translateZ(150px);
            transform: rotateX(90deg) translateZ(150px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(90deg) translateZ(150px);
            transform: rotateX(90deg) translateZ(150px);
  }
}
.cube .sides .bottom {
  -webkit-animation: bottom-animation 3s ease infinite;
          animation: bottom-animation 3s ease infinite;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
  -webkit-transform: rotateX(-90deg) translateZ(150px);
          transform: rotateX(-90deg) translateZ(150px);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
          -webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 40%,rgba(255,255,255,0.8));
}
@-webkit-keyframes bottom-animation {
  0% {
    opacity: 1;
    -webkit-transform: rotateX(-90deg) translateZ(150px);
            transform: rotateX(-90deg) translateZ(150px);
  }
  20% {
    opacity: 1;
    -webkit-transform: rotateX(-90deg) translateZ(75px);
            transform: rotateX(-90deg) translateZ(75px);
  }
  70% {
    opacity: 1;
    -webkit-transform: rotateX(-90deg) translateZ(75px);
            transform: rotateX(-90deg) translateZ(75px);
  }
  90% {
    opacity: 1;
    -webkit-transform: rotateX(-90deg) translateZ(150px);
            transform: rotateX(-90deg) translateZ(150px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(-90deg) translateZ(150px);
            transform: rotateX(-90deg) translateZ(150px);
  }
}
@keyframes bottom-animation {
  0% {
    opacity: 1;
    -webkit-transform: rotateX(-90deg) translateZ(150px);
            transform: rotateX(-90deg) translateZ(150px);
  }
  20% {
    opacity: 1;
    -webkit-transform: rotateX(-90deg) translateZ(75px);
            transform: rotateX(-90deg) translateZ(75px);
  }
  70% {
    opacity: 1;
    -webkit-transform: rotateX(-90deg) translateZ(75px);
            transform: rotateX(-90deg) translateZ(75px);
  }
  90% {
    opacity: 1;
    -webkit-transform: rotateX(-90deg) translateZ(150px);
            transform: rotateX(-90deg) translateZ(150px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(-90deg) translateZ(150px);
            transform: rotateX(-90deg) translateZ(150px);
  }
}
.cube .sides .front {
  -webkit-animation: front-animation 3s ease infinite;
          animation: front-animation 3s ease infinite;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
  -webkit-transform: rotateY(0deg) translateZ(150px);
          transform: rotateY(0deg) translateZ(150px);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
          -webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 30%,rgba(255,255,255,0.8));
}
@-webkit-keyframes front-animation {
  0% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) translateZ(150px);
            transform: rotateY(0deg) translateZ(150px);
  }
  20% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) translateZ(75px);
            transform: rotateY(0deg) translateZ(75px);
  }
  70% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) translateZ(75px);
            transform: rotateY(0deg) translateZ(75px);
  }
  90% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) translateZ(150px);
            transform: rotateY(0deg) translateZ(150px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) translateZ(150px);
            transform: rotateY(0deg) translateZ(150px);
  }
}
@keyframes front-animation {
  0% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) translateZ(150px);
            transform: rotateY(0deg) translateZ(150px);
  }
  20% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) translateZ(75px);
            transform: rotateY(0deg) translateZ(75px);
  }
  70% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) translateZ(75px);
            transform: rotateY(0deg) translateZ(75px);
  }
  90% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) translateZ(150px);
            transform: rotateY(0deg) translateZ(150px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) translateZ(150px);
            transform: rotateY(0deg) translateZ(150px);
  }
}
.cube .sides .back {
  -webkit-animation: back-animation 3s ease infinite;
          animation: back-animation 3s ease infinite;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
  -webkit-transform: rotateY(-180deg) translateZ(150px);
          transform: rotateY(-180deg) translateZ(150px);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
          -webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 30%,rgba(255,255,255,0.8));
}
@-webkit-keyframes back-animation {
  0% {
    opacity: 1;
    -webkit-transform: rotateY(-180deg) translateZ(150px);
            transform: rotateY(-180deg) translateZ(150px);
  }
  20% {
    opacity: 1;
    -webkit-transform: rotateY(-180deg) translateZ(75px);
            transform: rotateY(-180deg) translateZ(75px);
  }
  70% {
    opacity: 1;
    -webkit-transform: rotateY(-180deg) translateZ(75px);
            transform: rotateY(-180deg) translateZ(75px);
  }
  90% {
    opacity: 1;
    -webkit-transform: rotateY(-180deg) translateZ(150px);
            transform: rotateY(-180deg) translateZ(150px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(-180deg) translateZ(150px);
            transform: rotateY(-180deg) translateZ(150px);
  }
}
@keyframes back-animation {
  0% {
    opacity: 1;
    -webkit-transform: rotateY(-180deg) translateZ(150px);
            transform: rotateY(-180deg) translateZ(150px);
  }
  20% {
    opacity: 1;
    -webkit-transform: rotateY(-180deg) translateZ(75px);
            transform: rotateY(-180deg) translateZ(75px);
  }
  70% {
    opacity: 1;
    -webkit-transform: rotateY(-180deg) translateZ(75px);
            transform: rotateY(-180deg) translateZ(75px);
  }
  90% {
    opacity: 1;
    -webkit-transform: rotateY(-180deg) translateZ(150px);
            transform: rotateY(-180deg) translateZ(150px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(-180deg) translateZ(150px);
            transform: rotateY(-180deg) translateZ(150px);
  }
}
.cube .sides .left {
  -webkit-animation: left-animation 3s ease infinite;
          animation: left-animation 3s ease infinite;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
  -webkit-transform: rotateY(-90deg) translateZ(150px);
          transform: rotateY(-90deg) translateZ(150px);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
          -webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 30%,rgba(255,255,255,0.8));
}
@-webkit-keyframes left-animation {
  0% {
    opacity: 1;
    -webkit-transform: rotateY(-90deg) translateZ(150px);
            transform: rotateY(-90deg) translateZ(150px);
  }
  20% {
    opacity: 1;
    -webkit-transform: rotateY(-90deg) translateZ(75px);
            transform: rotateY(-90deg) translateZ(75px);
  }
  70% {
    opacity: 1;
    -webkit-transform: rotateY(-90deg) translateZ(75px);
            transform: rotateY(-90deg) translateZ(75px);
  }
  90% {
    opacity: 1;
    -webkit-transform: rotateY(-90deg) translateZ(150px);
            transform: rotateY(-90deg) translateZ(150px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(-90deg) translateZ(150px);
            transform: rotateY(-90deg) translateZ(150px);
  }
}
@keyframes left-animation {
  0% {
    opacity: 1;
    -webkit-transform: rotateY(-90deg) translateZ(150px);
            transform: rotateY(-90deg) translateZ(150px);
  }
  20% {
    opacity: 1;
    -webkit-transform: rotateY(-90deg) translateZ(75px);
            transform: rotateY(-90deg) translateZ(75px);
  }
  70% {
    opacity: 1;
    -webkit-transform: rotateY(-90deg) translateZ(75px);
            transform: rotateY(-90deg) translateZ(75px);
  }
  90% {
    opacity: 1;
    -webkit-transform: rotateY(-90deg) translateZ(150px);
            transform: rotateY(-90deg) translateZ(150px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(-90deg) translateZ(150px);
            transform: rotateY(-90deg) translateZ(150px);
  }
}
.cube .sides .right {
  -webkit-animation: right-animation 3s ease infinite;
          animation: right-animation 3s ease infinite;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
  -webkit-transform: rotateY(90deg) translateZ(150px);
          transform: rotateY(90deg) translateZ(150px);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
          -webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 30%,rgba(255,255,255,0.8));
}
@-webkit-keyframes right-animation {
  0% {
    opacity: 1;
    -webkit-transform: rotateY(90deg) translateZ(150px);
            transform: rotateY(90deg) translateZ(150px);
  }
  20% {
    opacity: 1;
    -webkit-transform: rotateY(90deg) translateZ(75px);
            transform: rotateY(90deg) translateZ(75px);
  }
  70% {
    opacity: 1;
    -webkit-transform: rotateY(90deg) translateZ(75px);
            transform: rotateY(90deg) translateZ(75px);
  }
  90% {
    opacity: 1;
    -webkit-transform: rotateY(90deg) translateZ(150px);
            transform: rotateY(90deg) translateZ(150px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(90deg) translateZ(150px);
            transform: rotateY(90deg) translateZ(150px);
  }
}
@keyframes right-animation {
  0% {
    opacity: 1;
    -webkit-transform: rotateY(90deg) translateZ(150px);
            transform: rotateY(90deg) translateZ(150px);
  }
  20% {
    opacity: 1;
    -webkit-transform: rotateY(90deg) translateZ(75px);
            transform: rotateY(90deg) translateZ(75px);
  }
  70% {
    opacity: 1;
    -webkit-transform: rotateY(90deg) translateZ(75px);
            transform: rotateY(90deg) translateZ(75px);
  }
  90% {
    opacity: 1;
    -webkit-transform: rotateY(90deg) translateZ(150px);
            transform: rotateY(90deg) translateZ(150px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(90deg) translateZ(150px);
            transform: rotateY(90deg) translateZ(150px);
  }
}
/*.text {
  margin-top: 450px;
  color: #f27777;
  font-size: 1.5rem;
  width: 100%;
  font-weight: 600;
  text-align: center;
}*/
</style>
</head>
<body>

<div class="container">
  <div class="cube">
    <div class="sides">
      <div class="top">
      	<img src="img/1.jpg" />
      </div>
      <div class="right">
      	<img src="img/2.jpg" />
      </div>
      <div class="bottom">
      	<img src="img/3.jpg" />
      </div>
      <div class="left"><img src="img/4.jpg" /></div>
      <div class="front"><img src="img/5.jpg" /></div>
      <div class="back"><img src="img/6.jpg" /></div>
    </div>
  </div>
 <!-- <div class="text">立方体</div>-->
</div>

</body>
</html>

效果演示3

奋斗的小菇凉
关注
专栏目录
HTML5+CSS3小实例：3D立方体旋转相册
艾恩小灰灰的博客
07-24 346
实例：3D立方体旋转相册。 技术栈：HTML、CSS。
3D 旋转相册 立方体的盒子 相册(源码分享)
preserveXing的博客
03-14 2411
效果图 css代码 *{ margin: 0; padding: 0; } body{ display: flex; justify-content: center; align-items: center; background-color: #333; min-height: 100vh; perspective: 1000px; } //构建 3D的空间 .con{ position: relative; w.
3D立方体旋转相册.html
06-07
3D立方体旋转相册，利用了CSS和HTML，换掉图片可以直接拿来用
网页特效：用CSS3制作3D图片立方体旋转特效
10-14 512
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS3制作3D图片立方体旋转特效 - 站长素材</title> 6 7 <style type="text/css"&g...
3D立方体旋转相册特效
03-05
3D相册，使用鼠标触碰图片，能看到3D旋转放大效果内叠加立方体特效。本相册使用了HTML5的画布技术，下载打开 guyu.html 需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看效果更佳！
3d立方体旋转相册 抖音热门
06-15
实现3d立方体旋转相册，里一个正方形相册，外一个大正方形相册，鼠标移上去 外层立方体还会变化，并且还可以旋转，总共12张图片可以显示，调成永久5分，便利大众
HTML带动态背景的3D立方体旋转相册源码.rar
最新发布
07-23
相册整体分为两个div盒子，内层和外层，内层div较小因此对其中的图片使用css对图片保留原有比例进行裁切，将整体相册容器开启3d渲染环境，当鼠标移入时外层div使用css对立方体的各个面进行平移且自定义旋转动画在最...
3D立方体图片旋转特效
07-29
3D立方体图片旋转特效
3D旋转立方体相册
weixin_46822367的博客
08-18 447
目录一、实现效果二、图片素材三、代码 一、实现效果 点击下面六个小的图片，上面的立方体会旋转并切换成对应的图片 关注一下，不要下次一定呦 二、图片素材 6张 300*300 6张 100*100 三、代码 1、index.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>3D立方体相框</tit
3d相册旋转
10-20
利用html和css3技术实现3d图片库的自动旋转，可以更好的浏览图片
CSS3制作3D图片立方体旋转特效.zip
07-04
CSS3制作3D图片立方体旋转特效是一款鼠标触碰模块炸开，大立方体中套小立方体特效。
3D旋转相册动画实例
03-20
纯CSS的3D立方体旋转相册动画实例，由图片组成的立方体自动旋转。
HTML5 Canvas 旋转的3D立方体动画.rar
07-10
HTML5 Canvas 旋转的3D立方体动画，有纵深感的旋转立方体，渲染的很不错，旋转的动画效果流畅，十分不错，是研究HTML5 Canvas技术的好范例。经测试，IE11兼容，火狐或Chrome、Opera等都有完美表现。
3D旋转相册.zip
11-06
网上很多相同的自己也弄了一下看着还不错 有需要的小伙伴可以下载来直接替换图片就可以使用 记得图片名称必须一样
小炫酷的3D旋转立方体相册
Jan_ge的博客
02-29 1284
小炫酷的3D旋转立方体相册 前言 今年是特别的一年，是特别宅的一年，大家都宅在家做贡献。在这个逆战时期，让我们发挥逆战精神，一起来敲代码吧！ 正文 今天，我们来做一个有点小炫酷的3D旋转立方体相册。那么首先，让我们来了解一下3D。 3D（立体空间） 属性： perspective 景深（近大远小），是观察物体的一个视角距离，距离越小效果越明显，它的数值一般为900px-1200px。 使用方法：...
3d正方体旋转相册代码_1分钟制作你自己的3D旋转相册(文末有共享链接)
weixin_39860755的博客
11-27 4035
不知在凛冽的寒风里的你是否还好？ 今天我们来做一个可以稍微抚慰你冻伤的小心灵的事情，一个3D旋转相册： 第一步，你需要找12张照片并命名为1.jpg,2.jpg,...,12.jpg等，并新建一个文件夹，命名为img 第二步，新建一个txt文件，并修改扩展名为index.html，以记事本打开文档，并输入一下代码：(其中：表示的是img为图片的文件夹名称...
3d正方体旋转相册
SAKURE2210866448的博客
11-17 8301
3d正方体旋转相册起因效果图思路涉及到的知识点==transform====animation==具体实现过程：第一步第二步第三步最后贴上完整代码这样一个简单的表白相册就做好啦，祝大家都可以抱得美人归~ 参考链接：http://www.softwhy.com/article-9051-1.html 起因 事情的起因是这个样子的，作为中华好闺蜜，没理由让自己的小宝贝羡慕别人！！ 效果图 先看效果图，...
3D旋转魔方
12-29
3D旋转魔方，实现按键控制魔方的旋转，含花式旋转和自动复原等功能，VS可直接运行(要配置相关OpenGL库）
用HTML5和CSS3实现3d立方体旋转相册
06-03
好的，下面是一个简单的示例代码，实现了一个基本的3D立方体旋转相册，您可以参考一下： HTML代码： ``` <div class="front"></div> <div class="back"></div> <div class="left"></div> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值