2D转换

最新推荐文章于 2022-12-12 21:25:58 发布

敏梨

最新推荐文章于 2022-12-12 21:25:58 发布

阅读量132

点赞数

文章标签： css

本文链接：https://blog.csdn.net/lzwlm53/article/details/113705076

版权

转换（transform）

移动（translate）类似于定位
旋转（rotate）
缩放（scale）

移动：

translate（x,y）或者分开写
translateX(n)
translateY(n)
移动沿x,y轴移动
不影响其他盒子
百分比是相对与自身元素的
对行内标签无效

<!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>
        /* 移动盒子的位置：定位、盒子的外边距、2D转换移动 */
        
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* transform: translate(100px, 100px); */
            /* transform: translate(100px, 0);Y不可省略 */
            /* transform: translateX(100px); */
            /* Y同理 */
            /* transform: translateX(50%); */
            /* 实现垂直居中  定位配合转换*/
            transform: ;
        }
        
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: red;
            transform: translate(-50%, -50%);
        }
        
        span {
            transform: translate(30px, 30px);
        }
        /* 行内元素无效 */
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
    <span></span>
</body>

</html>

旋转：

角度为正时顺时针，反之逆时针
默认旋转点的中心点为元素中心点
可以设置旋转中心点：transform-origin：x y;(默认是50%，xy可以是像素/方位名词）

<!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 {
            width: 150px;
            /* 顺时旋转45 */
            /* transform: rotate(45deg); */
            border-radius: 50%;
            border: 5px solid pink;
            /* 过渡写到本身上，谁过渡给谁加 */
            transition: all 3s;
        }
        /* 鼠标放上去旋转360 */
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <img src="123.jpg" alt="">
</body>

</html>

缩放：

逗号分隔
里面的数字就是倍数
三者可以进行缩写：transform：translate（50px,50px）rotate（180deg）scale（1,1）

<!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 {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* 也可以设置变换中心点 */
        }
        
        div:hover {
            /* 1.里面的数字不跟单位，就是倍数的意思1就是1倍2就是2倍（宽度，高度） */
            /* transform: scale(2, 4) */
            /* 等比例缩放同时修改高和宽 */
            /* transform: scale(2); */
            /* 进行缩小小于1就是缩放 */
            /* transform: scale(0.5); */
            /* scale优势之处：不会影响其他的盒子，且可以设置缩放中心点 */
            /* 直接设置改变宽和高是向下面和两边缩放 */
            transform: scale(2);
        }
    </style>
</head>

<body>
    <div>

    </div>
    123
</body>

</html>

敏梨

关注

0
点赞
踩
0

收藏

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

转换（transform）移动（translate）类似于定位旋转（rotate）缩放（scale）移动：translate（x,y）或者分开写translateX(n)translateY(n)移动沿x,y轴移动不影响其他盒子百分比是相对与自身元素的对行内标签无效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na
复制链接

扫一扫