HTML5基础加强css样式篇（css属性transform 函数（3D）3D盒子）（二十七）

最新推荐文章于 2023-03-14 22:49:51 发布

咸鸭蛋炒饭

最新推荐文章于 2023-03-14 22:49:51 发布

阅读量586

点赞数

分类专栏： HTML5基础篇文章标签： html5 经验 css 函数 3d

本文链接：https://blog.csdn.net/u010853130/article/details/64441721

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.效果图如下：

1代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
      .box{
          width: 150px;
          height: 150px;
          line-height: 150px;
          text-align: center;
          position: absolute;
          top: 25%;
          left: 25%;


      }
      #box1{
          background-color: rgba(255,0,0,0.2);
      }
      #box2{
          background-color: rgba(0,255,0,0.2);
          transform-origin:center;
          transform: translateZ(-150px);
      }
      #box3{
          background-color: rgba(0,0,255,0.2);
          transform-origin:bottom ;
          transform: rotateX(90deg);
        }
      #box4{
          background-color: rgba(0,255,255,0.2);
          transform-origin:top ;
          transform: rotateX(-90deg);

      }
      #box5{
          background-color: rgba(255,0,255,0.2);
          transform-origin:right ;
          transform: rotateY(-90deg);
        }
      #box6{
          background-color: rgba(255,255,0,0.2);
          transform-origin: left ;
          transform: rotateY(90deg);
        }
        #wapper{
            margin: 0 auto;
            transform-style: preserve-3d;
            transform-origin: center center -75px;
            position: relative;

        }
    </style>

</head>
<body>
<div id="wapper" >
    <div class="box" id="box1">1</div>
    <div class="box" id="box2">2</div>
    <div class="box" id="box3">3</div>
    <div class="box" id="box4">4</div>
    <div class="box" id="box5">5</div>
    <div class="box" id="box6">6</div>
</div>
</body>
<script type="text/javascript">
    var times=1;
    var wapper= document.getElementById("wapper");
    setInterval(function(){
        times++;
        //绕Y轴旋转
//        wapper.style.transform="translateY(150px) rotateY("+45+times*6+"deg) "
        //绕X轴旋转
        wapper.style.transform="translateY(150px) rotateX("+45+times*6+"deg)  "
    },100);
</script>
</html>