CSS3提高：CSS3 2D转换

转换（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%);

对行内标签没有效果

如果里面的参数是 % 移动的距离是盒子自身的宽度或者高度来对比的

让盒子居中

以前是通过top: 50%;left: 50%;margin-top: -100px;margin-left: -100px;要计算高度和宽度的一半

现在的实现方式

这里的 50% 就是 50px 因为盒子的宽度是 100px

2D 转换之旋转 rotate

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

1. 语法

transform:rotate(度数)

2. 重点

rotate里面跟度数，单位是 deg 比如 rotate(45deg)

角度为正时，顺时针，负时，为逆时针

默认旋转的中心点是元素的中心点

案例：三角形


p::before {
            content: '';
            position: absolute;
            right: 20px;
            top: 10px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
}

2D 转换中心点 transform-origin

我们可以设置元素转换的中心点

1. 语法

transform-origin: x y;

2. 重点

注意后面的参数 x 和 y 用空格隔开

x y 默认转换的中心点是元素的中心点 (50% 50%)

还可以给x y 设置像素或者方位名词（top bottom left right center

案例：旋转案例

/* 设置旋转中心点*/

transform-origin: x y;


<!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{
           width: 200px;
           height: 200px;
           border: 1px solid pink;
           margin: 10px ;
           overflow: hidden;
           float: left;
       }
       div::before{
           content: '222';
           display: block;
           width: 100%;
           height: 100%;
           background-color: hotpink;
           transform: rotate(180deg);
           transform-origin: left bottom;
           transition: all 1s;
       }
       /* 鼠标经过div 里面的before复原 */
       div:hover::before{
           transform: rotate(0deg);
       }
    </style>
</head>
 
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
 
</html>

2D 转换之缩放scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

1. 语法

transform:scale(x,y);

第一个是宽度，第二个是高度

2. 注意


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

这个不会影响下面的盒子，而使用width和height固定高宽，会撑大盒子

案例：放大图片


<!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{
            overflow: hidden;
            float: left;
            margin: 10px;
        }
        div img:hover{
            transform: scale(1.1);
        }
        div img{
            transition: all .4s;
        }
    </style>
</head>
 
<body>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
</body>
 
</html>

案例：分页按钮


<!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>
        li{
            width: 30px;
            height: 30px;
            border: 1px solid yellowgreen;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            float: left;
            margin: 10px;
            overflow: hidden;
        }
        li:hover{
            transition: all .3s;
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>
</html>

2D 转换综合写法

注意：

1. 同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，

2. 其顺序会影转换的效果。（先旋转会改变坐标轴方向）

3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前


<!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 {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all .5s;
        }
        
        div:hover {
            /* transform: rotate(180deg) translate(150px, 50px); */
            /* 我们同时有位移和其他属性，我们需要把位移放到最前面 */
			/* 先旋转 然后根据旋转后那个角度移动 */
            transform: translate(150px, 50px) rotate(180deg) scale(1.2);
        }
    </style>
</head>
 
<body>
    <div></div>
</body>
 
</html>

2D 转换总结

转换transform 我们简单理解就是变形有2D 和 3D 之分

我们暂且学了三个分别是位移旋转和缩放

2D 移动 translate(x, y) 最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的

可以分开写比如 translateX(x) 和 translateY(y)

2D 旋转 rotate(度数) 可以实现旋转元素度数的单位是deg

2D 缩放 sacle(x,y) 里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子

设置转换中心点 transform-origin : x y; 参数可以百分比、像素或者是方位名词

当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前

相关阅读:
git 第一次推代码
 WordPress导航主题蘑菇导航源码
 Android 逆向
 Hadoop伪分布式搭建步骤
 SAP UI5 DynamicPage 控件介绍
 C#实现最大公约数和最小公倍数
 秋招面试题系列- - -Java工程师（三）
Oracle SQL执行计划操作（1）——表相关操作
 银行双活数据中心建设项目实践
 JESD204B时钟网络
原文地址：https://blog.csdn.net/weixin_64612659/article/details/127585522