三、动画 -变形transform

news2024/11/27 0:16:22

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

一、变形transform定义

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

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

二、具体描述

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

例子：

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


  <style>
    .box1{
      width: 200px;
      height: 200px;
      background-color: goldenrod;
      margin: 0 auto;
      margin-top:100px;
    }
    .box2{
      width: 200px;
      height: 200px;
      background-color: orange;
      margin:0 auto;
    }
    /* 如果我们对box1变形，不会对box2产生影响，所有的位置任何属性都不会发生变化。
    有点像相对定位
    变形用transform:具体用函数translate()函数来设置
    */
  </style>

<body>
  
  <div class="box1"></div>
  <div class="box2"></div>

</body>

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

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

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

三、用途

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

 <style>
 .box3{
      width: 100px;
      height: 100px;
      background-color: red;
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      margin: auto;

    }
  </style>
  
<body>
  <div class="box3"></div>
</body>

上面这种写法有缺陷：如果这个元素，宽高是确定，可以这样写。
现在如果我现在把宽高删掉，然后box3盒子里面有字。现在想box3的宽高，通过我设置的box3的文字内容来撑开。并且box3依然在屏幕的居中。
如下这样写，你会发现box3撑满整个屏幕，因为你设置了 margin: auto; 所以它宽高也可以自动设置。当margin 和宽高都auto,优先调整宽高

 <style>
 .box3{
      background-color: red;
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      margin: auto;

    }
  </style>
  
<body>
  <div class="box3">22222</div>
</body>

  /* 
      这种居中方式，只适用于元素的大小确定
      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%);
    }

请添加图片描述

四、练习

做一个下面的效果。
请添加图片描述

<style>

    body{
      background-color: silver;
    }
   
   .box4, .box5{
    width: 220px;
    height: 330px;
    background-color: #fff;
    margin:0 auto;
    /* 浮动,让两个box5水平排列 */
    float: left;
    /* 左右设置间距 */
    margin: 0 10px;

    /* hover移动动画，过渡下，让动画效果自然 */
    transition: all .3s;
   }

   .box4:hover, .box5:hover{
    transform: translateY(4px);
    box-shadow: 0 0 10px rgba(0, 0, 0, .3)
   }
  
  </style>
<body>

  <div class="box4"></div>
  <div class="box5"></div>


</body>