3D盒子动画

发布时间：2019-07-12 10:04:06编辑：auto阅读（1474）

    3D盒子动画


    素材：

    1. 正方形图片若干


    2. wKiom1YBDU-y4-omAAUYi4p4SE8309.jpg

    3. wKiom1YBDVDRR2KUAAYBWnAZ2V8360.jpg

    4. wKioL1YBD5DSuL4vAAYwQFOGExc357.jpg

    5. wKiom1YBDVKQbcodAAQt589-5d0969.jpg

    6. wKioL1YBD5GgbK_kAAPbUHL0H6w102.jpg

    7. wKioL1YBD5Li4LbJAAYQkD4dyvU392.jpg


    以下为源码：

    ---------------------------------------------------------

    <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>3D动画box</title>
  <style type=text/css>
  
.warpper{position:fixed;top:30%;left:40%;perspective:1000px;}
.cube{
width:300px;height:300px;
transform-style:preserve-3d;/*设置3D环境*/
 }
.side{
width:300px;height:300px;
background:rgba(255,121,134,0.6);
position:absolute;
font-size:60px;
color:#fff;
line-height:300px;
text-align:center;
border:1px solid red;
border-radius: 50%;
}
.side_top{
width:300px;height:300px;
/*background:rgba(255,121,134,0.6);*/
background-p_w_picpath: url(img/01.png);
position:absolute;
font-size:60px;
color:#fff;
line-height:300px;
text-align:center;
border:1px solid red;
/*border-radius: 50%;*/
opacity:0.9;
}
.side_bottom{
width:300px;height:300px;
/*background:rgba(255,121,134,0.6);*/
background-p_w_picpath: url(img/02.png);
position:absolute;
font-size:60px;
color:#fff;
line-height:300px;
text-align:center;
border:1px solid red;
/*border-radius: 50%;*/
opacity: 0.9;
}
.side_left{
width:300px;height:300px;
/*background:rgba(255,121,134,0.6);*/
background-p_w_picpath: url(img/03.png);
position:absolute;
font-size:60px;
color:#fff;
line-height:300px;
text-align:center;
border:1px solid red;
/*border-radius: 50%;*/
opacity: 0.9;
}
.side_right{
width:300px;height:300px;
/*background:rgba(255,121,134,0.6);*/
background-p_w_picpath: url(img/04.png);
position:absolute;
font-size:60px;
color:#fff;
line-height:300px;
text-align:center;
border:1px solid red;
/*border-radius: 50%;*/
opacity: 0.9;
}
.side_back{
width:300px;height:300px;
/*background:rgba(255,121,134,0.6);*/
background-p_w_picpath: url(img/05.png);
position:absolute;
font-size:60px;
color:#fff;
line-height:300px;
text-align:center;
border:1px solid red;
/*border-radius: 50%;*/
opacity: 0.9;
}
.side_front{
width:300px;height:300px;
/*background:rgba(255,121,134,0.6);*/
background-p_w_picpath: url(img/06.png);
position:absolute;
font-size:60px;
color:#fff;
line-height:300px;
text-align:center;
border:1px solid red;
/*border-radius: 50%;*/
opacity: 0.7;
}
.top{transform:rotateX(90deg) translateZ(150px);}
.bottom{transform:rotateX(-90deg) translateZ(150px);}
.left{transform:rotateY(-90deg) translateZ(150px);}
.right{transform:rotateY(90deg) translateZ(150px);}
.back{transform:rotateX(180deg) translateZ(150px);}
.front{transform:rotateY(0deg) translateZ(150px);}
  </style>
 </head>
 <body>
 
<div class="warpper">
<div class="cube" id="cube">
<div class="top side_top">1</div>
<div class="bottom side_bottom">2</div>
<div class="left side_left">3</div>
<div class="right side_right">4</div>
<div class="back side_back">5</div>
<div class="front side_front">6</div>
</div>
</div>
<!--<script type="text/javascript" src="js/niannian-kuku.js"></script>-->
<script type="text/javascript">
var cubeDom = document.getElementById("cube");
var y = 0;
setInterval(function(){
if(y>360){
y=0; 
}
y += 5;
cubeDom.style.transform = "rotateY("+y+"deg) rotateX("+y+"deg)";
//document.body.style.background = kuku.RandomColor();
//document.body.innerHTML = kuku.RandomNmb(1,11);
},100);
</script>
 </body>
</html>


    --------------------------------------------

    效果图：

    wKiom1YBDjSzziU9AAIekPSN-Js000.jpgwKioL1YfEXbx8G_5AAGfZLm3Ar4425.jpg


关键字：

上一篇： router6 QoS 3管制与×××

下一篇： Cisco Switches/Route