css3的transform属性
高洛峰
高洛峰 2016-10-25 16:24:18
0
1
869

当你对一个元素进行了translateY(10px)操作,再对它进行rotateZ(45deg)操作,此时该元素的旋转中心却是以translateY之前的状态作为旋转中心,这是为什么?

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <style media="screen">
         * {margin: 0; padding: 0;}
         .b {
            width: 50px;
            height: 50px;
            /*border-radius: 50%;*/
            background: #000;
            position: relative;
         };
         ul {
            width: 20px;
            height: 20px;
            /*background: #fff;*/
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -10px;
            margin-left: -10px;
         }
         li {
            width: 20px;
            height: 2px;
            background: #fff;
            position: absolute;
            top: 50%;
            margin-top: (-1px);
            transform: translateY(3.75px);
            transition: all 1s;
         }
         li:nth-child(2) {
            transform: translateY(-3.75px);
         }
      </style>
   </head>
   <body>
      <div class="b">
         <ul>
            <li></li>
            <li></li>
         </ul>
      </div>

   </body>
   <script type="text/javascript">
      var b = document.querySelector('.b');
      var lis = document.querySelectorAll('li');
      var bol = false;
      b.addEventListener('click',function(){
         bol = !bol;
         if(bol) {
            lis[0].style.transform = 'rotateZ(45deg)';
            lis[1].style.transform = 'rotateZ(-45deg)';
         } else {
            lis[0].style.transform = 'rotateZ(0deg)';
            lis[1].style.transform = 'rotateZ(0deg)';
         }

      })
   </script>
</html>


高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

모든 응답(1)
三叔

都写在一个transform里

      var b = document.querySelector('.b');
      var lis = document.querySelectorAll('li');
      var bol = false;
      b.addEventListener('click',function(){
         bol = !bol;
         if(bol) {
            lis[0].style.transform = 'rotateZ(45deg)';
            lis[1].style.transform = 'rotateZ(-45deg)';
         } else {
            lis[0].style.transform = 'translateY(3.75px) rotateZ(0deg)';
            lis[1].style.transform = 'translateY(-3.75px) rotateZ(0deg)';
         }

      })


최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿