首页手记 3D旋转（视频中学来的，分享给大家）

3D旋转（视频中学来的，分享给大家）

标签：

Html/CSS Html5 CSS3

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

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

点击查看更多内容