为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 3D旋转(视频中学来的,分享给大家)

3D旋转(视频中学来的,分享给大家)

2016.06.27 15:19 3013浏览

不完善之处,请自己完善。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus">
  <!--网页三要素:标题,关键词,描述 -->
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述">
  <title>3D旋转</title>

  <!--CSS层叠样式表-->
  <style type="text/css">
  *{
      margin:0px;
      padding:0px:
  }
  #box{
      width:150px;
      height:150px;
      margin:150px auto;/*上下   左右*/
      transform-style:preserve-3d;/*置于3D空间*/
      transform-origin:center center center;/*3d空间的x,y,z居中*/
      animation:spain   12s infinite linear;
      position:relative;
  }
  @-webkit-keyframes spain
  {
            form{transform:rotateX(0deg) rotateY(0deg)}
            to{transform:rotateX(360deg) rotateY(360deg)}
  }
  /*#box .box1{
      width:100px;
      height:160px;
      border:1px solid red;
      border-width:3px 3px 0px 0px;/*上 右 下 左 边框线*/
      /*position:absolute;
      left:0;
      top:0;
      border-radius:50% 40% 50% 0;
      transform:rotateX(0deg) rotateZ(45deg) translateX(30PX)

  }*/
  </style>
 </head>
 <body>
      <div id="box"></div>

      <!-- JS -->
      <script>
      //获取到容器
      var objbox = document.getElementById("box");
      //创建div
      for(var i=0; i<36; i++)
      {
          var obj = document.createElement("div");
          obj.style.width = "100px";
          obj.style.height = "160px";
          obj.style.border = "1px solid "+color()+"";
          obj.style.borderWidth = "2px 2px 0px 0px";
          obj.style.position = "absolute";
          obj.style.left = "0";
          obj.style.top = "0";
          obj.style.borderRadius = "50% 40% 50% 0";
          obj.style.transform = "rotateY("+10*i+"0deg) rotateZ(50deg) translateX(30px)";

          //添加对象
          objbox.appendChild(obj);
      }

      //随机颜色
      function color()
      {
          var r = parseInt(Math.random()*255);
          var g = parseInt(Math.random()*255);
          var b = parseInt(Math.random()*255);
          return "rgba("+r+","+g+","+b+",1)";
      }
      </script>

 </body>
</html>
点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

12人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
1
获赞与收藏
134

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消