【css】transform（旋转，平移，缩放，扭曲）及变换参考点的位置 

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>转换（旋转，平移，缩放，扭曲）</title>
      <style>
            div.rotate,
            div.translate,
            div.scale,
            div.skew,
            div.location {
                  width: 100px;
                  height: 100px;
                  background-color: rgb(99, 97, 235);
                  margin: 20px 50px;
            }

            div.rotate>div.rot,
            div.translate>div.tlate,
            div.scale>div.sca,
            div.skew>div.sk,
            div.location>div.loca {
                  width: 100px;
                  height: 100px;
                  background: rgb(197, 30, 30);
                  transition: all .3s;
                  opacity: 0.8;
            }
            /* 旋转 */
            div.rotate>div.rot:hover {
                  transform: rotate(90deg);
            }
            /* 平移 */
            div.translate>div.tlate:hover{
                  transform: translate(50px,20px);
            }
            /* 缩放 */
            div.scale>div.sca:hover{
                  transform: scale(1.5,0.5);
            }
            /* 扭曲 */
            div.skew>div.sk:hover{
                  transform: skew(20deg,50deg);
            }
            /* 控制旋转的位置 */
            div.location>div.loca:hover{
                  transform-origin: 0 50%;
                  transform: rotate(90deg);
            }
      </style>
</head>

<body>
      <div class="rotate">
            <div class="rot"></div>
      </div>
      <div class="translate">
            <div class="tlate"></div>
      </div>
      <div class="scale">
            <div class="sca"></div>
      </div>
      <div class="skew">
            <div class="sk"></div>
      </div>
      <div class="location">
            <div class="loca"></div>
      </div>
      <!-- matrix(a,b,c,d,e,f)

            matrix(1,0,0,1.5,40,50)

            1: 水平缩放比例。默认1

            0：缩放

            0：缩放

            1.5：垂直方向缩放比例

            40：水平方向位移

            50：垂直方向位移 
      -->
</body>

</html>

　　

posted @ 2020-08-19 12:26  敲代码的阿磊  阅读(1996)  评论(0)    收藏  举报