CSS3-2D转换

HTML5&CSS3
906 词
CSS32D转换

2D转换#

转换(transform) 是CSS3中具有颠覆性1的特征之一，可以实现元素的位移、旋转、缩放等效果

转换(transform)可以简单理解为变形

  • 移动：translate
  • 旋转：rotate
  • 缩放：scale

二维坐标系#

2D转换是改变标签在二维平面上的位置和形状的一种技术

二维坐标系

2D转换之移动translate#

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似 定位 。

  1. 语法 transform:translate(x,y);或者分开写
    transform:translateX(n);
    transform:translateY(n);
  2. 重点
    • 定义2D转换中的移动，沿着X和Y轴移动元素
    • translate最大的优点：不会影响到其他元素的位置
    • translate中的百分比单位是相对于自身元素的，translate(50%,50%);
    • 对行内标签没有效果

2D转换之旋转rotate#

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

  1. 语法 transform:rotate(度数);
  2. 重点
    • rotate里面跟度数，单位是deg，比如rotate(45deg)
    • 角度为正时，顺时针，反之逆时针
    • 默认旋转的中心点是元素的中心点

案例：三角小箭头#

2D转换中心点transform-origin#

可以设置元素转换的中心点

  1. 语法 transform-origin:x y;
  2. 重点
    • 注意后面的参数x和y用空格隔开
    • x y默认转换的中心点是元素的中心点(50%,50%)
    • 还可以给x y设置像素或者方位名词(top bottom left center)

2D转换之缩放scale#

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

  1. 语法 transform:scale(x,y);
  2. 注意
    • 注意其中的x和y用逗号分隔
    • transform:scale(1.1)：宽和高都放大一倍，相对于没有放大
    • transform:scale(2,2)：宽和高都放大了2倍
    • transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
    • transform:scale(0.5,0.5)：缩小
    • sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

2D转换综合写法#

注意：
  1. 同时使用多个转换，其格式为： transform:translate() rotate() scale()...等
  2. 其顺序会影响转换的效果。(先旋转会改变坐标轴方向)
  3. 当同时有位移和其他属性时，要将位移放到最前面