CSS3 2D转换

最新推荐文章于 2023-08-06 17:03:05 发布

夏大爷耶耶耶

最新推荐文章于 2023-08-06 17:03:05 发布

阅读量639

点赞数 2

分类专栏：杂文章标签： javascript html 前端

本文链接：https://blog.csdn.net/xy_is_fhh/article/details/121525861

版权

杂专栏收录该内容

44 篇文章 2 订阅

订阅专栏

一、2D转换之移动 translate

二、2D转换之旋转 rotate

2D转换中心点 transform-origin

三、2D转换之缩放scale

2D转换综合写法

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

转换简单理解为变形

😳移动：translate

😳旋转：rotate

😳缩放：scale

一、2D转换之移动 translate

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

1.语法：

transform: translate(x, y);

transform: translateX(n);

transform: translateY(n);

2.重点：

· 定义2D转换中的移动，沿着X和Y轴移动元素

· translate最大的优点：不会影响到其他元素的位置

· translate中的百分比单位是相对于自身元素的translate:(50%, 50%);

· 对行内标签没有效果

利用translate实现水平垂直居中

二、2D转换之旋转 rotate

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

1.语法：transform: rotate(度数)

2.重点：

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

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

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

<!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>rotate案例</title>
    <style>
        /* 不用字体图标而用正方形旋转，两边取透明值实现效果 */
        div {
            position: relative;
            width: 200px;
            height: 30px;
            border: 1px solid orangered;
        }
        div::after{
            position: absolute;
            top: 10px;
            left: 180px;
            content: "";
            width: 10px;
            height: 10px;
            border-left: 1px solid orangered;
            border-top: 1px solid orangered;
            border-bottom: 1px solid transparent;
            border-right: 1px solid transparent;
            transform: rotate(45deg);
            transition: all 0.3s;
        }
        div:hover::after {
            transform: rotate(225deg);   
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2D转换中心点 transform-origin

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

1.语法：transform-origin: x y;

2.重点：

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

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

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

三、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)：缩小

· scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

图片放大案例 👇

<!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>图片放大效果</title>
    <style>
        div {
            float: left;
            /* 超出部分隐藏，这一步很重要 */
            overflow: hidden;
            margin: 10px;
        }
        div img{
            width: 100px;
            height: 100px;
            transition: all 0.3s;
        }
       div img:hover {
           transform: scale(1.1);
       }
    </style>
</head>
<body>
    <div>
        <img src="img/晚上好.jpg">
    </div>
    <div>
        <img src="img/晚上好.jpg">
    </div>
    <div>
        <img src="img/晚上好.jpg">
    </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>分页按钮</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style-type: none;
            float: left;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border: 1px solid green;
            margin: 10px;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
            transition: all .5s;
        }
        li:hover{
            transform: scale(1.2);
        }
    </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.当我们同时有唯一和其他层性的时候，记得要将位移放到最前

夏大爷耶耶耶

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 2D转换

转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果转换简单理解为变形????移动：translate????旋转：rotate????缩放：scale2D转换之移动 translate2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。1.语法：transform: translate(x, y);transform: translateX(n);transform: translateY(n);2
复制链接

扫一扫