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);
       }