OmniStack Lab

Appearance

转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果 转换(transform)可以简单理解为变形

  • 移动: transform
  • 旋转: rotate
  • 缩放: scale

1.二维坐标系 ​

2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系
img.png

2.2D转换之移动translate ​

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

2.1 语法 ​

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

2.2 重点 ​

  1. 定义2D转换中的移动,沿着X和Y轴移动元素
  2. translate最大的优点: 不会影响到其他元素的位置
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:first-child {
            background-color: pink;
            height: 100px;
            width: 100px;
            transform: translate(50px,50px);
        }
        div:last-child {
            background-color: purple;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

img_1.png

  1. translate中的百分比单位是相对于自身元素的translate:(50%,50%)
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:first-child {
            background-color: pink;
            height: 100px;
            width: 100px;
            transform: translate(50%,50%);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

img_2.png

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: relative;
            background-color: pink;
            height: 500px;
            width: 500px;
        }
        p {
            position: absolute;
            left: 50%;
            top: 50%;
            background-color: purple;
            height: 200px;
            width: 200px;
            transform: translate(-50%,-50%);

        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

img_3.png

  1. 对行内标签没有效果

3.2D转换之旋转rotate ​

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

3.1 语法 ​

html
transform:rotate(度数)

3.2 重点 ​

  1. rotate里面跟度数，单位是deg比如rotate(45deg)
  2. 角度为正时，顺时针，负时，为逆时针
  3. 默认旋转的中心点时元素的中心点
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border: 3px solid pink;
            transition: all 0.7s;
        }
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="pic.jpg" alt="">
</body>
</html>

img1.gif

3.3 案例:三角形 ​

img_4.png

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: relative;
            height: 35px;
            width: 250px;
            border: 1px solid #000;
        }
        div::after {
            content: "";
            position: absolute;
            top: 7px;
            right: 10px;
            height: 10px;
            width: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.5s;
        }
        div:hover::after {
            transform: rotate(225deg);
            top: 13px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

gif1.gif

4.2D转换中心点transform-origin ​

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

4.1 语法 ​

css
transform-origin: x y;

4.2 重点 ​

  1. 注意后面的参数x和y要用空格隔开
  2. x y默认旋转的中心点是元素的中心点(50% 50%)
  3. 还可以给x y设置像素或者方位名词(top bottom left right center)
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: pink;
            height: 200px;
            width: 200px;
            margin: 100px auto;
            transition: all 0.5s;
            transform-origin: left bottom;
        }
        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

gif2.gif

4.3 案例 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            float: left;
            overflow: hidden;
            height: 200px;
            width: 200px;
            border: 1px solid #000;
            margin: 10px;
        }
        div::before {
            content: "旋转";
            text-align: center;
            line-height: 200px;
            display: block;
            height: 200px;
            width: 200px;
            background-color: blueviolet;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 0.5s;
        }
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

gif3.gif

5.2D转换之缩放scale ​

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

5.1 语法 ​

css
transform:scale(x,y);

5.2 注意 ​

  1. 注意其中的x和y是用逗号分隔
  2. transform:scale(1,1): 宽和高都放大一倍，相当于没有放大
  3. transform:scale(2,2): 宽和高都放大了两倍
  4. transform:scale(2): 只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
  5. transform:scale(0.5，0.5): 缩小
  6. scale缩放的最大优势: 可以设置旋转中心点缩放，默认以中心点缩放的，而且不影响其他盒子
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div2 {
            float: left;
            height: 200px;
            width: 200px;
            background-color: pink;
            margin: 100px;
        }
        .div2:hover {
            transform: scale(2,2);
        }
        .div1 {
            float: left;
            height: 200px;
            width: 200px;
            background-color: pink;
            margin: 100px;
        }
        .div1:hover {
            transform: scale(0.5,0.5);
        }
    </style>
</head>
<body>
    <div class="div2"></div>
    <div class="div1"></div>
</body>
</html>

gif4.gif

5.3 案例1:鼠标经过图片放大效果 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            float: left;
            margin: 10px;
            
        }
        div img{
            height: 200px;
            width: 200px;
            transition: all 0.6s;
        }
        div img:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div>
        <a href="#"><img src="R-C.jpg" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="R-C.jpg" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="R-C.jpg" alt=""></a>
    </div>
</body>
</html>

gif5.gif

5.4 案例2:分页按钮 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            list-style: none;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.5s;
        }
        li:hover {
            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>

gif6.gif

6.2D转换综合写法 ​

  1. 同时使用多个转换，其格式为: transform: translate() rotate() scale()
  2. 其顺序会影响转换效果。(先旋转会改变坐标轴方向)
  3. 当我们同时有位移和其他属性的时候，记得要将位移放在最前面
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 200px;
            width: 200px;
            background-color: pink;
            transition: all 0.5s;
        }
        div:hover {
            transform: translate(150px,50px) rotate(360deg) scale(0.5,0.5);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

gif7.gif

7.2D转换总结 ​

  1. 转换transform我们简单理解就是变形有2D和3D之分
  2. 我们暂时接触了三个 分别是 位移 旋转和缩放
  3. 2D移动translate(x,y) 最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的
  4. 可以分开写比如translateX 和 translateY
  5. 2D旋转rotate(度数) 可以实现旋转元素 度数的单位是deg
  6. 2D缩放scale(x,y)里面参数是数字 不是单位 可以是小数 最大的优势是不影响其他盒子
  7. 设置旋转中心点transform-origin: x y;参数可以是百分比、像素或是其他方位名词
  8. 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前面

Released under the MIT License.

Copyright © 2024-present gqk