3d盒子

最新推荐文章于 2024-06-27 12:43:45 发布
Van-bo
最新推荐文章于 2024-06-27 12:43:45 发布
阅读量443
点赞数 2
分类专栏： Web开发
本文链接：https://blog.csdn.net/qq_41573860/article/details/80782028
版权
Web开发专栏收录该内容
10 篇文章 0 订阅
订阅专栏
<!DOCTYPE HTML >
<HTML>
 <HEAD>
  <TITLE> 旋转盒 </TITLE>
   <meta charset="UTF-8">
  <META name="Generator" content="EditPlus">
  <META name="Author" content="">
  <META name="Keywords" content="">
  <META name="Description" content="">
  <style>
  html,body{
  height:100%;
  width:100%;
  }

  body{
  margin:0;
  background-image:url("images/bg2.jpg"); 
  background-repeat:no-repeat;
  background-size:100%;
  }

  .heart1,.heart2,.heart3 ,.heart4/* ,.heart5,.heart6,.heart7,.heart8,.heart9,.heart10 */{
  width:60px;
  height:60px;
  transform:rotate(-45deg);
  position:relative;
  animation:loveCode 0.6s ease-in infinite;/* 匀速 */
  }

  .heart1{
 top:-330px;
 left:80px;
  background:#ffffff;
}

.heart2{
 top:80px;
 left:80px;
  background:#ea4044;
}
.heart3{
 top:-450px;
 left:1200px;
  background:#2cbdc0;
}
.heart4{
 top:-30px;
 left:1200px;
  background:#dcf431;
}
/* .heart5{
 top:-390px;
 left:1250px;
 background:#990000;
}
.heart6{
 top:50px;
 left:40px;
 background:#00ccff;
}
.heart7{
 top:0px;
 left:400px;
  background:#ff99cc;
}
.heart8{
 top:-70px;
 left:800px;
 background:#0000ff;
}
.heart9{
 top:-120px;
 left:1250px;
 background:#e61ab3;
}
.heart10{
 top:-450px;
 left:1250px;
 background:#f70909;
} */
 
  .heart1:before,.heart1:after,.heart2:before,.heart2:after,.heart3:before,.heart3:after,.heart4:before,.heart4:after,.heart5:before,.heart5:after,.heart6:before,.heart6:after,.heart7:before,.heart7:after,.heart8:before,.heart8:after,.heart9:before,.heart9:after,.heart10:before,.heart10:after{
  position:absolute;
   content:"";
   width:60px;
   height:60px;
   border-radius:60%;
   }

  .heart1:before{
  left:30px;
   background:#ffffff;
  }

   .heart1:after{
  top:-30px;
  background:#ffffff;
   }
.heart2:before{
  left:30px;
  background:#ea4044;
  }

   .heart2:after{
  top:-30px;
background:#ea4044;
   }
   .heart3:before{
  left:30px;
 background:#2cbdc0;
  }

   .heart3:after{
  top:-30px;
background:#2cbdc0;
   }
  .heart4:before{
  left:30px;
 background:#dcf431;
  }

   .heart4:after{
  top:-30px;
 background:#dcf431;
   }
   /*   .heart5:before{
       left:30px;
      background:#990000;
       }
     
        .heart5:after{
       top:-30px;
     background:#990000;
        }
       .heart6:before{
       left:30px;
      background:#00ccff;
       }
     
        .heart6:after{
       top:-30px;
     background:#00ccff;
        }
       .heart7:before{
       left:30px;
      background:#ff99cc;
       }
     
        .heart7:after{
       top:-30px;
      background:#ff99cc;
        }
     .heart8:before{
       left:30px;
      background:#0000ff;
       }
     
        .heart8:after{
       top:-30px;
     background:#0000ff;
        }
       .heart9:before{
       left:30px;
      background:#e61ab3;
       }
     
        .heart9:after{
       top:-30px;
     background:#e61ab3;
        }
         .heart10:before{
       left:30px;
      background:#f70909;
       }
     
        .heart10:after{
       top:-30px;
     background:#f70909;
        } */
   @keyframes loveCode{
   0%{transform:scale(1)rotate(-45deg);}
    25%{transform:scale(1.1)rotate(-45deg);}
	 50%{transform:scale(1.2)rotate(-30deg);}
	  75%{transform:scale(1.3)rotate(-65deg);}
	   100%{transform:scale(1.4)rotate(-45deg);}
   }
 
  .wrap{
height:200px;
margin-top:200px;
perspective:1000px;
}
.wrap .cube{
position:relative;
width:200px;
height:200px;
margin:0 auto;
transform-style:preserve-3d;
transform:rotateX(0deg) rotateY(0deg);
animation:change 20s linear infinite;
}
.wrap .cube div{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
line-height:200px;
font-size:89px;
text-align:center;
transition:transform 0.8s ease-in;
}
.wrap .cube .front{
background-image:url("images/1.jpg");
transform:translateZ(100px);
}
.wrap .cube .back{
background-image:url("images/2.jpg");
transform:translateZ(-100px) rotateY(180deg);/* 将背面文字转正 */
}
.wrap .cube .right{
background-image:url("images/3.jpg");
transform:rotateY(90deg) translateZ(100px);/* y轴成点，x，z轴互相垂直，顺时针旋转为负角度，逆时针为正*/
}
.wrap .cube .left{
background-image:url("images/4.jpg");
transform:rotateY(-90deg) translateZ(100px);
}
.wrap .cube .top{
background-image:url("images/5.jpg");
transform:rotateX(90deg) translateZ(100px);
}
.wrap .cube .bottom{
background-image:url("images/6.jpg");
transform:rotateX(-90deg) translateZ(100px);
}
.wrap .cube i{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
width:100px;
height:100px;
}
.wrap .cube .i-front{
background-image:url("images/bg.jpg");
transform:translateZ(50px);
}
.wrap .cube .i-back{
background-image:url("images/bg.jpg");
transform:translateZ(-50px) rotateY(180deg);
}
.wrap .cube .i-right{
background-image:url("images/bg.jpg");
transform:rotateY(90deg) translateZ(50px);
}
.wrap .cube .i-left{
background-image:url("images/bg.jpg");
transform:rotateY(-90deg) translateZ(50px);
}
.wrap .cube .i-top{
background-image:url("images/bg.jpg");
transform:rotateX(90deg) translateZ(50px);
}
.wrap .cube .i-bottom{
background-image:url("images/bg.jpg");
transform:rotateX(-90deg) translateZ(50px);
}
/* .div1{
height:200px;
background-color:#eee;
perspective:1000px;
}
.div2{
width:200px;
height:200px;
background-color:red;
transform-style:preserve-3d;
transform:rotateX(0deg);
} */


.wrap .cube:hover .front{
transform:translateZ(160px);
}
.wrap .cube:hover .back{
transform:translateZ(-160px) rotateY(180deg);/* 将背面文字转正 */
}
.wrap .cube:hover .right{
transform:rotateY(90deg) translateZ(160px);/* 从下往上看，顺时针，旋转正 */
}
.wrap .cube:hover .left{
transform:rotateY(-90deg) translateZ(160px);
}
.wrap .cube:hover .top{
transform:rotateX(90deg) translateZ(160px);
}
.wrap .cube:hover .bottom{
transform:rotateX(-90deg) translateZ(160px);
}

.wrap .cube:hover .front1{
transform:translateZ(250px);
color:#ffff00;
}
.wrap .cube:hover .back1{
transform:translateZ(-250px) rotateY(180deg);
color:#00ff00;
}
.wrap .cube:hover .right1{
transform:rotateY(90deg) translateZ(250px);
color:#ff0066;
}
.wrap .cube:hover .left1{
transform:rotateY(-90deg) translateZ(250px);
color:#0099ff;
}
.wrap .cube:hover .top1{
transform:rotateX(90deg) translateZ(250px);
color:#0000cc;
}
.wrap .cube:hover .bottom1{
transform:rotateX(-90deg) translateZ(250px);
color:#ff9900;
}
@keyframes change{
0%{transform:rotateX(0deg) rotateY(0deg);}
100%{transform:rotateX(360deg) rotateY(360deg);}
}
  
  </style>
 </HEAD>
 <BODY>
<div class="wrap">
	<div class="cube">
	<div class="front"></div>
	<div class="back"></div>
	<div class="right"></div>
	<div class="left"></div>
	<div class="top"></div>
	<div class="bottom"></div>
	<i class="i-front"></i>
	<i class="i-back"></i>
	<i class="i-right"></i>
	<i class="i-left"></i>
	<i class="i-top"></i>
	<i class="i-bottom"></i>
	<div class="front1">西</div>
	<div class="back1">安</div>
	<div class="right1">理</div>
	<div class="left1">工</div>
	<div class="top1">大</div>
	<div class="bottom1">学</div>
	</div>	
	</div> 
  <div class="heart1"> </div>
  <div class="heart2"></div>
  <div class="heart3"></div>
  <div class="heart4"></div>
  <div class="heart5"></div>
  <div class="heart6"></div>
  <div class="heart7"></div>
  <div class="heart8"></div>
  <div class="heart9"></div>
  <div class="heart10"></div>


 </BODY>
</HTML>
Van-bo
关注
2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
3d盒子

&lt;!DOCTYPE HTML &gt;&lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; 旋转盒 &lt;/TITLE&gt; &lt;meta charset="UTF-8"&gt; &lt;META name="Generator" content="EditPlus"&gt;
复制链接

扫一扫
专栏目录