css3——translate组合rotate实验心得

translate  ： 平移的意思，如：translateX(10px),就是向X轴方向平移10个px。

rotate ：旋转的意思，如：rotateY(90deg),就是按Y轴顺时针旋转90度。

当我在同时使用它们两个的时候发现并不是特别顺心，这里面主要是涉及到了中心点的原因。

<!DOCTYPE html>
<html lang="zh-CN">
   <head>
      <meta charset="UTF-8">
      <title>提交</title>
      <style>
         *{
            padding:0;
            margin:0;
         }
         .div{
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            transform: rotateY(8deg);
            margin-left:300px;
            position: relative;
            border:1px solid black;
         }
         .div::before{
            content: "";
            width: 1px;
            height:200px;
            background:black;
            display: block;
            margin-left: 100px;
         }
         .div::after{
            content: "";
            width: 200px;
            height: 1px;
            background: black;
            display: block;
            margin-top: -100px;
         }
         .div1{
            position: absolute;
            width: 50px;
            height: 200px;
            background:pink;
            left:0;
            top:0;
            transform: rotateY(0deg) translateX(0px);
         }
      </style>
   </head>
   <body>
      <div class="div">
         <div class="div1">haha</div>
      </div>
   </body>

</html>

原始代码很简单，一个父div，里面一个子div1

预览效果：

css3——translate组合rotate实验心得

父div就是田字格方框，子div就是粉色部分。

下面我们给子div设置上和rotateY(40deg)，这个时候子div是按照自己宽度的中心轴旋转的。

css3——translate组合rotate实验心得

下面我们设置上translateX(50px)，这时候我们再调整rotateY的值，发现是按照没有平移前的那个位置的中心轴旋转的。

css3——translate组合rotate实验心得

这说明，当同时使用translate和rotate属性的时候，rotate始终按div第一次出现的位置的纵向中心轴旋转。

但是这样不太好理解，也不好计算，于是乎这样做了，当我需要平移div的时候，直接使用margin-left，这样就始终按div的中心轴旋转了。

css3——translate组合rotate实验心得

这样就不用担心位置弄错了。