【Html】18-transform形变

transform

变形，改变的意思;

描述一种形状变化后的结果；

平面2D效果

先来个div

div {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            border-radius: 10%;
            background-color: #ccf;
            transition: all 5s;
        }

rotate()旋转

单位：deg

一个值默认绕图形正中心旋转

transform: rotate(45deg)

• rotateX

  沿着X轴旋转

  transform: rotateX(45deg);

  

• rotateY

  沿着Y轴旋转

  transform: rotateY(45deg);

  

translate()位移

一个值默认向X轴

transform: translate(50px)

两个值时，第一个为X轴；第二个为Y轴

transform: translate(50px,60px)

• translateX()

  transform: translateX(50px)

  

• translateY()

  transform: translateY(50px)

  

  scale()缩放

指定缩放倍数

假定缩放倍数为 n；

• n = 0

  元素消失

  transform: scale(0)

  

• 0 < n <1

  元素缩小

  transform: scale(0.5)

  

• n = 1

  元素不变

• n > 1

  元素放大

  transform: scale(2)

  

• n为负值时

  负号（-）使元素倒置，其他参照上面

  transform: scale(-1)

  

  transform: scale(-0.5)

  

skew()倾斜

指定倾斜的角度

单位：deg

• 一个值默认向X轴

  transform: skew(20deg)

  

• 两个值时，第一个为X轴；第二个为Y轴

  transform: skew(20deg,45deg)

  

• skewX()

  transform: skewX(20deg)

  

• skewY()

  transform: skewY(45deg)

  

transform-origin

旋转的基点

先来个transform: rotate(45deg);

• top center left right bottom

  transform-origin: top right;

  

• 百分比

  transform-origin: 50% 20%;

  

• 像素值

  transform-origin: 50px 100px;

  

若只给一个值，则默认第二个值为center

transform-origin: 0;

---

END