专栏首页python33D盒子动画

3D盒子动画

3D盒子动画

素材:

  1. 正方形图片若干

以下为源码:

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

<!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>

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

效果图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS3 转换(Transform)

    在CSS中,允许元素实现 2D 和 3D的转换效果,主要包含 :旋转,缩放,移动,倾斜        

    py3study
  • CSS3学习3----举例

    《2》。对于绝对定位:对于上面的浮动的div1,div2,div3,我们还可以通过绝对定位对其进行设置。如:

    py3study
  • CSS3

    http://caniuse.com/ 1、私有前缀及其用法 .round{ -khtml-border-radius: 10px; / Konqueror /...

    py3study
  • WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式一)

    本文所说的”返回顶部、返回底部、评论 “相信你知道是什么东东了吧?  一般你在各大网站的右下角都能看到类似的东东,但许多网站都普遍只有“返回顶部”的效果。不过就...

    Jeff
  • FF下修改美化文件域(input type=file)的样式

    有兄弟问我修改美化文件域(input type=file)在FF下的样式,暂时没看兼容.也没美化.等到了上海安定好了再好好修改下 <!DOCTYPE html ...

    练小习
  • 为博客添加恋爱天数小工具

    AlexTao
  • IOS下box-shadow的诡异bug的修复

    先说环境,我测试了两台IOS手机,iphone 8 ios 11.4.1 和 iphone 6s plus ios 11.4.1,都存在这个诡异的bug。

    用户1515472
  • CSS3 box-shadow 属性

    关于css相关的属性,看似很简单,实际上却蕴含着巨大的潜力,细心组合,学好css之后,能够呈现出一些特别好看的界面哦,尤其像今天所说的CSS3 box-shad...

    祈澈菇凉
  • 博客开通(附本博客样式)

    博客于今日开通,在这网络资源日益丰富的年代,曾经在这里得到了许多宝贵的资料以及众多经验。想想也该到了分享心得的阶段了,顺便记录下成长的经历,共勉。

    xiaoxi666
  • 博客园博客排版(js样式实例)

    昨天在博客园中看到一位大神发的博客园样式排版博客,我一看。妈呀,太漂亮了,二话不说赶快学起,昨天我花了一天的时间,终于把我的博客也弄得有一丢丢像样了,有好东西,...

    Dawnzhang

扫码关注云+社区

领取腾讯云代金券