CSS第十天学习总结—— CSS3 2D转换

最新推荐文章于 2023-01-30 13:47:06 发布

李穩钰

最新推荐文章于 2023-01-30 13:47:06 发布

阅读量370

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/weixin_52819925/article/details/119277232

版权

本文详细介绍了CSS3中的2D转换，包括2d移动translate、2d旋转rotate、2d缩放scale以及转换中心transform-origin的用法，并通过多个案例展示了它们的应用，如三角箭头旋转、图片放大和分页按钮效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3 2D转换

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

缩放：scale
移动：translate
旋转：rotate
倾斜：skew （不介绍，感兴趣自己看https://blog.youkuaiyun.com/alwayssmlilewpc/article/details/79890004）

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

2维坐标系

2维坐标系其实就是指布局的时候的坐标系。

在这里插入图片描述

2d移动 translate

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

使用步骤：

给元素添加 转换属性 transform
属性值为 translate(x,y) 如 transform:translate(50px,50px);

语法：

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

示例代码：

  div{
   
    transform: translate(50px,50px);
    /*transform：改变；translate：有移动的意思
    理解，我要改变这个div，怎么改变呢？通过移动来改变div的位置。
    注意：这个操作没有动画过程，是直接瞬间向下向右移动了50px
    还可以分开写：
      transform:translateX(50px);
      transform:translateY(50px);
      */
  }

在这里插入图片描述

特点:

translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
translate类似定位，不会影响到其他元素的位置
对行内标签没有效果

应用：让盒子水平垂直居中

1、先用子绝父相定位

2、Top:50%; left:50%

3、然后给子元素添加 { transform：translate（-50%，-50%）}

4、无论子盒子宽高如何改变，盒子都水平垂直居中

2d旋转 rotate

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

使用步骤：

给元素添加转换属性 transform
属性值为 rotate(角度)
如 transform:rotate(30deg) 顺时针方向旋转30度

语法：

transform: rotate(度数)

示例代码：

div{
   
      transform: rotate(0deg);
      // rotate：旋转
      // deg：degree：度
}

在浏览器中手动修改 rotate 的效果：

在这里插入图片描述

特点：

rotate里面跟度数，单位是 deg比如 rotate(45deg)
角度为正时顺时针负时为逆时针
默认旋转的中心点是元素的中心点
旋转会改变坐标轴的方向
注意：这个其实也没有动画过程，我们在演示的时候，是在浏览器中手动修改了rotate这个值，角度一直改变，才出现上图旋转效果
补充：transform: rotate(.5turn); turn 也是单位代表圈

案例：三角箭头旋转

默认效果：

在这里插入图片描述

鼠标悬浮效果：做动画向上转动

在这里插入图片描述

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
     
            position: relative;

最低0.47元/天解锁文章