三、动画 -变形transform

目录：
1.变形transform定义
2.具体描述
3.用途
4.练习

一、变形transform定义

变形就是指通过CSS来改变元素的形状或位置

• 变形不会影响到页面的布局
• transform 用来设置元素的变形效果
• 设置具体的值用translate()函数

二、具体描述

  - 平移：
    translateX() 沿着x轴方向平移
    translateY() 沿着y轴方向平移
    translateZ() 沿着z轴方向平移
  - 平移元素，百分比是相对于自身计算的

例子：

1.首先我们先做准备工作：在界面上画出两个方块。

  


  
  
"box1">
"box2">

2.现在让box1往x轴右侧移动。

 .box1{
      width: 200px;
      height: 200px;
      background-color: green;
      margin: 0 auto;
      margin-top:100px;

      /* transform: translateX(100px); */
      /*平移元素，百分比是相对于自身计算的,所以可以看到移动的位置是往右移动自己的一个整个宽度*/
      transform: translateX(100%);
    }

三、用途

比如以前我们设置一个元素在整个界面居中，是如下设置：

 
  

  
"box3">

• 上面这种写法有缺陷：如果这个元素，宽高是确定，可以这样写。

• 现在如果我现在把宽高删掉，然后box3盒子里面有字。现在想box3的宽高，通过我设置的box3的文字内容来撑开。并且box3依然在屏幕的居中。

• 如下这样写，你会发现box3撑满整个屏幕，因为你设置了 margin: auto; 所以它宽高也可以自动设置。当margin 和宽高 都auto,优先调整宽高

 
  

  
"box3">22222


  /* 
      这种居中方式，只适用于元素的大小确定
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto; */

解决方法：

• left:50%; 初始包含块的50%，在这里就是body,即box3先往左边便宜整个屏幕的一半，
• 然后，我们在让aaa box3本身往左偏移一半，使得，box3的中心点，对齐，屏幕的中心点。能办到这点的就是用transform:translateX(-50%), 这里的-50% 是表示自身的一半。
• 同理，水平居中，类似高度只需要控制top,和translateY.

代码：

 .box3{
      background-color:red;
      position:absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%), translateY(-50%);
    }

四、练习

做一个下面的效果。

  
"box4">
  
"box5">

效果图：