CSS3 2D 转换之旋转


CSS3 2D 转换之旋转

CSS3 2D转换

  • 转换(transfrom)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果
  • 转换(transfrom)可以简单的理解为变形
    • 移动:translate
    • 旋转:rotate
    • 缩放:scale

CSS3 2D 转换之旋转rotate

  • 2D旋转指的是让元素在二维平面内顺时针旋转或逆时针旋转

  • 语法

  • transform:rotate(度数)

  • 重点

    • rotate里面根度数,单位是deg(比如: rotate(45deg))
    • 角度为正时,顺时针旋转,角度为负时,逆时针旋转
    • 默认旋转的中心点是元素的中心点
  • 下面我们来使一张图片进行旋转

img {
        width: 150px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin: -75px;
        transition: all 1.5s;
}

img:hover {
        transform: rotate(360deg);
 }
  • 我们利用过渡加旋转完成了一个图片的顺时针360°旋转

2D转换中心点

  • transform-origin可以用来设置元素转换的中心点

  • 语法

    • transform-origin: x y;
  • 重点

    • 注意后面的参数x和y用空格隔开
    • x y默认转换的中心点是元素的中心点(50% 50%)
    • 还可以给x y 设置 像素 或者 方位名词(top botton left center)
      • transform-origin: 50% 50%;等价于transform-origin: center center;
      • transform-origin: 40px 40px;可以是px 像素
      • transform-origin: left bottom;
  • 下面我们来演示一下transform-origin: 40px 40px;

img {
           width: 150px;
           position: fixed;
           top: 50%;
           left: 50%;
           margin: -75px;
           transition: all 1.5s;
           transform-origin: 40px 40px;
       }

       img:hover {
           transform: rotate(360deg);
       }

打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2022 CODEPRJ.COM