CSS_变形

变形

属性名: transform

属性值:

• none 不变形

• rotate 旋转 单位: deg 度 rotate() rotateX() rotateY()

• skew 扭曲 单位: deg 度 90*奇数 都会扭成一条线, 导致看不见 skew() skewX() skewY()

• scale 中心缩放 单位: 倍数 scale()

  ​ =1 本身
  ​ >1 放大
  ​ <1 缩小

• translate 位移
  translate(X)
  translate(X,Y)
  translateX()
  translateY()

<style>
        img{transition: all .5s; margin-top: 50px;}
        img:nth-of-type(1):hover{ transform: rotate(30deg) }
        img:nth-of-type(1):hover{ transform: rotate(90deg) }
        img:nth-of-type(1):hover{ transform: rotate(900deg) }
        img:nth-of-type(1):hover{ transform: rotate(-30deg) }
        img:nth-of-type(1):hover{ transform: rotateX(-30deg) }
        img:nth-of-type(1):hover{ transform: rotateY(-60deg) }
        img:nth-of-type(2):hover{ transform: skew(30deg) }
        img:nth-of-type(2):hover{ transform: skew(90deg) }
        img:nth-of-type(2):hover{ transform: skew(180deg) }
        img:nth-of-type(2):hover{ transform: skew(270deg) }
        img:nth-of-type(2):hover{ transform: skewX(30deg) }
        img:nth-of-type(2):hover{ transform: skewY(30deg) }
        img:nth-of-type(3):hover{ transform: scale(1) }
        img:nth-of-type(3):hover{ transform: scale(2) }
        img:nth-of-type(3):hover{ transform: scale(1.5) }
        img:nth-of-type(3):hover{ transform: scale(0.5) }
        img:nth-of-type(3):hover{ transform: scale(0) }
        img:nth-of-type(3):hover{ transform: scale(-1) }
        img:nth-of-type(4):hover{ transform: translate(20px) }
        img:nth-of-type(4):hover{ transform: translate(20px, 50px) }
        img:nth-of-type(4):hover{ transform: translateX(20px) }
        img:nth-of-type(4):hover{ transform: translateX(-20px) }
</style>

<img src="resource/1.jpg" height="80px">
<img src="resource/2.jpg" height="80px">
<img src="resource/3.jpg" height="80px">
<img src="resource/4.jpg" height="80px">