CSS 内容总结(六)2D转换

最新推荐文章于 2023-07-12 13:11:15 发布

辛跃

最新推荐文章于 2023-07-12 13:11:15 发布

阅读量128

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_47735503/article/details/114415385

版权

CSS 内容总结

1.转换

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

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

2.2D转换之移动translate

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

语法：

transform：translate(x,y);或者分开写
transform：translateX(n);
transform：translateY(n);

  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: rgb(30, 156, 97);
      transform: translate(100px, 100px);
      /* 只移动x */
      transform: translate(100px, 0);
      transform: translateX(100px);
      /* 只移动y */
      transform: translate(0, 100px);
      transform: translateY(100px);
    }
  </style>
</head>
<!-- 移动盒子位置：定位 盒子外边距 2D转换移动 -->

<body>
  <div></div>
</body>

优点：不会影响其他盒子位置

重点：

定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的宽高translate:(50%,50%);
对行内标签没有效果

盒子水平垂直居中：
<style>
    div {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 200px;
      height: 200px;
      background-color: rgb(30, 156, 97);
      /* margin-top: -100px;
      margin-left: -100px; */
      transform: translate(-50%, -50%);
      /* 可以替代上边那两条语句 */
    }
  </style>
</head>
<!-- 移动盒子位置：定位 盒子外边距 2D转换移动 -->

<body>
  <div></div>
</body>

3.2D转换之旋转rotate

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

语法
```
transform:rotate(度数)
```

重点

ratate里面跟度数，单位是deg 比如 rotate(45deg)
角度为正时，顺时针，负时，逆时针
默认旋转的中心点是元素的中心点

  <style>
    div {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 200px;
      height: 200px;
      background-color: rgb(30, 156, 97);
      transform: rotate(5deg);
      transition: all 1s;
    }
    div:hover {
      transform: rotate(365deg);/*0度对应360度 依次上加*/
    }
  </style>
</head>
<!-- 移动盒子位置：定位 盒子外边距 2D转换移动 -->

<body>
  <div></div>
</body>

案例：手写小三角

  <style>
    div {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 10px;
      height: 10px;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      transform: rotate(45deg);
    }
  </style>
</head>

<body>
  <div></div>
</body>

在这里插入图片描述

设置转换中心点 transform-origin(x y)

重点：

注意后面的参数 x和y用空格隔开
x y默认转换的中心点是元素的中心点（50% 50%）
还可以给x y设置像素或者方位名词（top bottom left right center）

  <style>
    div {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 200px;
      height: 200px;
      background-color: rgb(30, 156, 97);
      transition: all 1s;
      /* transform-origin: left bottom; */
      transform-origin: 40px 50px;
    }

    div:hover {
      transform: rotate(360deg);
    }
  </style>
</head>
<!-- 移动盒子位置：定位 盒子外边距 2D转换移动 -->

<body>
  <div></div>
</body>

案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      margin: 100px auto;
      width: 200px;
      height: 200px;
      background-color: rgb(30, 156, 97);
      transition: all 1s;
      /* transform-origin: left bottom; */
    }

    .centerbox {
      position: absolute;
      margin-top: 5px;
      margin-left: 4px;
      width: 100px;
      height: 100px;
      background-color: rgba(100, 99, 98, 0.507);
      overflow: hidden;
    }

    .littlebox {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: rgba(235, 124, 14, 0.507);
      transition: all 0.4s;
      transform: rotate(90deg);
      transform-origin: left bottom;
    }

    .box:hover .littlebox {
      transform: rotate(0deg);
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="centerbox">
      <div class="littlebox"></div>
    </div>
  </div>
</body>

</html>

4.2D转换之缩放

缩放：给元素添加上了这个属性就能控制它放大还是缩小

语法
```
transform:scale(x,y);
```

注意

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

  <style>
    .box {
      margin: 100px auto;
      width: 200px;
      height: 200px;
      background-color: rgb(30, 156, 97);
      transition: all 1s;
      /* transform-origin: left bottom; */
    }

    .box:hover {
      /* transform: scale(2, 2); */
      transform: scale(0.5, 0.5);
    }
  </style>
</head>

<body>
  <div class="box">
  </div>
</body>