2.8 CSS3之2D 转换

2.8 2D 转换

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

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

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

• 移动：translate

• 旋转：rotate

• 缩放：scale

2.8.1 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系 0原点 ×轴水平向右 -------------------------------------> | | | |y轴垂直向下

  transform: translate(x, y)
  transform: translateX(n)
  transfrom: translateY(n)  

重点知识点

• 定义2D转换中的移动，沿着X和Y轴移动元素

• translate最大的优点∶不会影响到其他元素的位置

• translate中的百分比单位是相对于自身元素的translate:(50%,50%);

• 对行内标签没有效果

div {
  background-color: lightseagreen;
   200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移动 100px */
  /* transform: translate(100px, 100px); */
​
  /* 水平移动 100px */
  /* transform: translate(100px, 0) */
​
  /* 垂直移动 100px */
  /* transform: translate(0, 100px) */
​
  /* 水平移动 100px */
  /* transform: translateX(100px); */
​
  /* 垂直移动 100px */
  transform: translateY(100px);
  /*百分比用法*/
  transform: translateY(100%);   
}

让一个盒子水平垂直居中

div {
    position: relative;
     500px;
    height: 500px;
    background-color: pink;
    /* 1. 我们tranlate里面的参数是可以用 % */
    /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
    /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
    /* transform: translateX(50%); */
    }
        
p {
    position: absolute;
    top: 50%;
    left: 50%;
     200px;
    height: 200px;
    background-color: purple;
    /1.* margin-top: -100px;
    margin-left: -100px; */
  
    /2.* translate(-50%, -50%)  
      盒子往上走自己高度的一半   */
    transform: translate(-50%, -50%);
  }
        
span {
    /* translate 对于行内元素是无效的 */
    transform: translate(300px, 300px);
    }

2.8.2 2D转换之旋转 rotate

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

/* rotate(度数) 单位是：deg */
img:hover {
  transform: rotate(360deg)
}

• rotate语法

  • rotate 里面跟度数，单位是 deg

  • 角度为正时，顺时针，角度为负时，逆时针

  • 默认旋转的中心点是元素的中心点

• 设置元素旋转的中心的(transform-origin)

  transform-origin: x y;

• 注意

  • 后面的参数 x 和 y 用空格隔开

  • x y 默认旋转的中心点是元素的中心(50% 50%),等价于center center

  • 还可以给x y 设置像素或者方位名词(top、bottom、left、right、center)

2.8.3 2D转换之缩放scale

• scale的作用：用来控制元素的放大与缩小

transform: scale(x, y)

• 知识要点：

• • 注意，x与y之间用逗号进行分隔

  • transform: scale(1, 1): 宽高都放大一倍，相当于没有放大

  • transform: scale(2, 2): 宽和高都放大了二倍

  • transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致

  • transform:scale(0.5, 0.5): 缩小

  • scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

   div:hover {
    /* 注意，数字是倍数的含义，所以不需要加单位 */
    /* transform: scale(2, 2) */ 
   
    /* 实现等比缩放，同时修改宽与高 */
    /* transform: scale(2) */
   
    /* 小于 1 就等于缩放*/
    transform: scale(0.5, 0.5)
   }

2.8.4 2D 转换综合写法以及顺序问题

知识要点

• 同时使用多个转换，其格式为 transform: translate() rotate() scale()

• 顺序会影响到转换的效果(先旋转会改变坐标轴方向)

• 当我们同时有位置或者其他属性的时候，要将位移放到最前面

div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

2.8.5 2D转换总结

• 转换transform我们简单理解就是变形有2D和3D之分

• 我们暂且学了三个分别是位移旋转和缩放

• 2D移动translate(x, y)最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的

• 可以分开写比如translateX(x)和translateY(y)

• 2D 旋转rotate(度数)可以实现旋转元素度数的单位是deg

• 2D缩放sacle(xy)里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子

• 设置转换中心点transform-origin : x y;参数可以百分比、像素或者是方位名词

• 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前