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实验心得