新增H5与CSS3知识笔记3

最新推荐文章于 2023-02-17 18:57:13 发布

柯柯来康康

最新推荐文章于 2023-02-17 18:57:13 发布

阅读量230

点赞数

分类专栏：学习知识分享 H5与CSS3 文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_42647901/article/details/108810948

版权

CSS3的2D转换以及3D转换

2D转换

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

移动 transform

（1）语法：

transform：translate（x,y）；或者分开写

transform：translateX（n）

transform：translateY（n）

（2）重点：

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

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

translate中的百分比单位是相对于自身元素的translate：（50%，50%）

对行内标签没有效果

例1：不会影响其他元素的位置

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 移动盒子的位置：定位 盒子的外边距 2d转换移动 */

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* x就是在x轴上移动位置，y就是在y轴上移动位置，中间用逗号分隔 */
            /* transform: translate(x,y); */
            /* transform: translate(100px, 100px) */
            /* 1.只移动x坐标 */
            /* transform: translate(100px, 0) */
            /* transform: translateX(100px); */
            /* 2.只移动y坐标 */
            /* transform: translate(0, 100px) */
            /* transform: translateY(100px); */

        }

        div:first-child {
            transform: translate(30px, 30px);
        }

        div:last-child {
            background-color: purple;
        }
    </style>
</head>

<body>
    <!-- 不加div1 first-child和last-child会失效 -->
    <div1>
        <div></div>
        <div></div>
    </div1>

</body>

例2：translate中的百分比单位是相对于自身元素的translate：（50%，50%）且对行内标签没有效果

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: purple;
            /* 1.translate里面的参数是可以使用%的 */
            /* 2.如果参数里面的参数移动的距离是盒子自身的宽度或高度来对比的 */
            /* 这里的50%就是250px 因为盒子宽度是500px*/
            /* transform: translate(50%, 50%); */
        }

        p {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 因为相对自身50%是100px，且是往上和往左，则为-100px 这是之前的方案*/
            /* margin-top: -100px;
            margin-left: -100px; */
            /* translate(-50%,-50%) 盒子往上走自己高度的一半*/
            transform: translate(-50%, -50%);
        }

        span {
            /* translate对行内元素无效 */
            transform: translate(300px, 300px);
        }
    </style>
</head>

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

旋转 rotate

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

（1）语法：

transform：rotate（度数）

（2）重点：

rotate里面跟度数，单位是deg，比如rotate（45deg）

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

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

例1：经过图片时会触发旋转效果

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            margin-left: 100px;
            margin-top: 20px;
            border-radius: 50%;
            border: 1px solid red;
            width: 150px;
            /* 顺时针旋转45度 */
            /* transform: rotate(45deg); */
            /* 过渡写在本身上，谁给动画给谁加 */
            transition: all 1s;
        }

        /* 经过图片时会触发旋转效果 */
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <img src="/02-1.jpg" alt="">
</body>

注：

/* 过渡写在本身上，谁给动画给谁加 */

transition: all 1s;

例2：三角形（可以用正方形的下边和右边显示，并旋转45度即可）

这里就自己实现了，发现有些错误！后面补回来

2D转换中心点transform-origin

1.语法：

transform-origin：x y;

2.重点：

注意以空格隔开

默认转换的中心点是元素的中心点（50% 50%）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            /* 把div旋转到外面的部分隐藏 */
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 10px;
            float: left;
        }

        div::before {
            content: "柯柯";
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            /* 旋转中心为左下角 */
            transition: all 0.4s;
            /* 过渡写在本身上，谁给动画给谁加 */
        }

        /* 鼠标经过div里面的before复原 */
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

缩放 scale

1.语法：

transform：scale（x,y）;

2.注意：

用逗号分隔

transform：scale（1,1）：宽和高都放大一倍，相当于没有放大

transform：scale（2,2）：宽和高都放大2倍

transform：scale（2）：只有一个参数，第二个参数就和第一个参数一样，相当于scale（2,2）

transform：scale（0.5,0.5）：缩小

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

例1：可设置转换中心点缩放，不影响其他盒子

<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;
            /* transform-origin: left bottom; */
            /* 可设置转换中心点缩放 */
        }

        div:hover {
            /* 可设置转换中心点缩放，默认以中心点缩放的，而不影响其他盒子 */
            transform: scale(2);
        }
    </style>
</head>

<body>
    <div></div>
    <div1>123</div1>
</body>

例2：图片放大，超出隐藏

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    &l

最低0.47元/天解锁文章

柯柯来康康

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新增H5与CSS3知识笔记3

CSS3的2D转换以及3D转换 2D转换转换（transform）是CSS3具有颠覆性的的特征之一，可实现元素的位移、旋转、缩放等效果移动 transform（1）语法：transform：translate（x,y）；或者分开写transform：translateX（n）transform：translateY（n）（2）重点：定义2D转换中的移动，沿着X和Y轴移动元素 translate最大的优点是：不会影响其他元素的位置 translate中的百分比单位是
复制链接

扫一扫

专栏目录