Web前端学习笔记4（transform(2D转换), 盒子水平垂直居中，转换旋转点（transform-origin），rotate, scale）

最新推荐文章于 2023-03-13 14:31:12 发布

rootting

最新推荐文章于 2023-03-13 14:31:12 发布

阅读量964

点赞数

分类专栏： web前端文章标签：前端学习 html

本文链接：https://blog.csdn.net/m0_60531106/article/details/125985114

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

transform(2D转换)

x为x轴上的位置，y为y轴上的位置，中间用逗号分割

transform: translate(x, y);

transform: translate(100px, 100px);

如果只移动x坐标 y坐标上不能不写,要写0

transform: translate(100px, 0);

或者

transform: translateX(100px);

我们translateX可以用%

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

这里的%50就为50px（100px的一半）

transform: translateX(50%);

div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* x为x轴上的位置，y为y轴上的位置， 中间用逗号分割 */
            transform: translate(x, y); 
            transform: translate(100px, 100px); 
            /* 如果只移动x坐标 y坐标上不能不写,要写0 */
            transform: translate(100px, 0);
            /* 或者 */
            transform: translateX(100px);
             /* 我们translateX可以用%  */
            /* 如果里面的参数是%，移动的距离为盒子自身的高度或宽度来对比 */
            /* 这里的%50就为50px（100px的一半） */
            transform: translateX(50%);
        }

盒子水平垂直居中

步骤：1、先让盒子移动距离父亲盒子高度的一半，和距离父亲盒子左边的一半

2、盒子自己往上走自己高度的一半，和往左走自己宽度的一半

div{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        p {
            /* 让一个盒子水平垂直居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            /* 盒子往上走自己高度的一半，往左走自己宽度的一半 */
            transform: translate(-50%, -50%);
            /* margin-top: -100px;
            margin-left: -100px; */
            width: 200px;
            height: 200px;
            background-color: purple;

        }
        /* 行内标签不能用translate */
        span {
            transform: translate(100px, 100px);
        }

rotate

deg为度的意思

img{
            width: 150px;
            /* //deg为度的意思 */
            /* transform: rotate(45deg); */
            border-radius: 50%;
            border: 5px solid pink;
            /* 过渡写到本身上，谁做动画给谁加 */
            transition: all 0.3s;
        }
        img:hover{
            transform: rotate(360deg);
        }

案例：小三角的制作

给正方形留下右边和下边然后旋转

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);
            transition: all 0.6s;
        }
        /* 鼠标经过div三角旋转 */
        div:hover::after {
            transform: rotate(225deg);
        }

转换旋转点（transform-origin）

可以用方位名词

transform-origin: left bottom;

默认为50%, 50%,等价于center center

也可以为px像素（中间用空格隔开）

div{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* /* 可以用方位名词 */
            transform-origin: left bottom;
            /* 默认为50%, 50%,等价于center center */
            /* 也可以为px像素（中间用空格隔开） */ 
            transition: all 1s;
        }
        div:hover{
            transform: rotate(360deg);
        }

旋转点案例：

<!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>
        div{
            /* 不要看到外面的 */
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
        }
        div::before{
            content: "哈哈";
            /* 伪类元素为行内元素，无法指定大小 */
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform-origin: left bottom;
            transform: rotate(180deg);
            transition: all 1s;
        }
        /* 鼠标经过div给before复原 */
        div:hover::before{
            transform: rotate(0deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

scale

/* 1、里面写的数字不跟单位，就是倍数的意思，1就是1倍，2就是2倍 */

/* transform: scale(x, y); */

/* transform: scale(2, 2); */

/* 2、修改了宽度为原来的两倍，高度不变 */

/* transform: scale(2, 1); */

/* 等比例缩放，以下是宽度为原来的两倍，高度默认和前一个一样 */

/* transform: scale(2); */

/* 我们可以进行缩小，小于1为缩放 */

/* transform: scale(0.5); */

/* scale的优势之处：不会影响其他的盒子，而且可以设置缩放的中心点 */

div{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto
        }
        div:hover{
            /* 1、里面写的数字不跟单位，就是倍数的意思，1就是1倍，2就是2倍 */
            /* transform: scale(x, y); */
            /* transform: scale(2, 2); */
            /* 2、修改了宽度为原来的两倍，高度不变 */
            /* transform: scale(2, 1); */
            /* 等比例缩放，以下是宽度为原来的两倍，高度默认和前一个一样 */
            /* transform: scale(2); */
            /* 我们可以进行缩小，小于1为缩放 */
            /* transform: scale(0.5); */
            /* scale的优势之处：不会影响其他的盒子，而且可以设置缩放的中心点 */
        }

rootting

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端学习笔记4（transform(2D转换), 盒子水平垂直居中，转换旋转点（transform-origin），rotate, scale）

x为x轴上的位置，y为y轴上的位置，中间用逗号分割如果只移动x坐标y坐标上不能不写,要写0或者我们translateX可以用%如果里面的参数是%，移动的距离为盒子自身的高度或宽度来对比这里的%50就为50px（100px的一半）...
复制链接

扫一扫