2D转换及相关案例实现

王祎0825

已于 2022-03-30 21:43:24 修改

阅读量568

点赞数

分类专栏：阶段一：前端开发基础阶段二：移动web网页开发文章标签： css3 css html 前端

于 2022-03-29 19:13:14 首次发布

本文链接：https://blog.csdn.net/qq_44757223/article/details/123738228

版权

本文介绍了CSS3中的2D转换，包括移动translate、旋转rotate、缩放scale以及转换中心点transform-origin。详细讲解了各个转换的语法、重点，并通过多个案例展示了其实现效果，如三角形旋转、图片放大等。

摘要由CSDN通过智能技术生成

前言

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

转换（transform）可以简单理解为变形

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

一、二维坐标系

2D转换时改变标签在二维平面上的位置和形状的一种技术，

二、2D转换之移动translate

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

1.语法

transform：translate（x，y）;或者分开写
transform:translateX(n);
transform:translateY(n);

2.重点

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

三、2D转换之旋转rotate

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

1.语法

transform:rotate(度数）

2.重点

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

3.案例：三角形

 <style>
        div {
   
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }
        
        div::after {
   
            content: '';
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);