2D概念应用

最新推荐文章于 2022-08-04 17:09:02 发布

谎言Palpitate

最新推荐文章于 2022-08-04 17:09:02 发布

阅读量182

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/nmbdasa12/article/details/123326963

版权

2D、

概念、

俗称2d变换，指的是基于2d平面的角度，让标签元素发生变化。例如，让盒子移动、让盒子缩放、让盒子旋转。。。

平移

平移是让盒子在水平方向或垂直方向进行移动。

transform: translateX(像素值); /* 水平方向移动，正值向右，负值向左 */
transform: translateY(像素值); /* 垂直方向移动，正值向下，负值向上 */
transform: translate(水平方向像素值, 垂直方向像素值); /* 复合写法 */

<style>
    .box{
        width: 300px;
        height: 300px;
        border:1px solid #000;
    }
    .small{
        width: 100px;
        height: 100px;
        background-color: #f00;

        transition: all 3s;
    }
    /* 当鼠标移入box的时候，让small向右移动200px */
    /* 
    2d变化，css属性：transform
    */
    .box:hover .small{
        /* 2d平移
        
            水平平移：translateX(像素值)

            垂直平移：translateY(像素值)
        */
        /* transform: translateX(200px); */

        /* transform: translateY(200px); */

        /* 复合写法 */
        /* transform: translate(200px, 200px); */

        /* 如果使用百分比来表示像素值，指的是自身的百分比 */
        /* transform: translate(50%, 50%); */
    }
</style>
<body>
<div class="box">
    <div class="small"></div>
</div>

缩放、

缩放指让盒子可以缩放或放大一定的倍数。

transform: scaleX(横向放大倍数);
transform: scaleY(纵向放大倍数);
transform: scale(倍数); /* 大于1的放大，小于1缩小 */

<style>
    .box{
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        margin:50px auto;
    }
    .small{
        width: 100px;
        height: 100px;
        background-color: #f00;
    }
    /* 鼠标移入大盒子，让小盒子放大1倍 */
    .box:hover .small{
        /* 放大 - 缩放：scale(倍数) */
        /* transform: scaleX(2); */

        /* transform: scaleY(2); */

        /* transform: scale(2, 2); */
        transform: scale(0.5, .5);
    }
</style>
<div class="box">
    <div class="small"></div>
</div>

旋转

旋转指让盒子绕着x轴或y轴进行旋转。

transform: rotateX(旋转的角度); /* 绕着x轴旋转多少角度 */
transform: rotateY(旋转的角度); /* 绕着y轴旋转多少角度 */
transform: rotate(旋转的角度); /* 绕着盒子中心点旋转多少角度 */
transform-origin: x轴坐标 y轴坐标; /* 调整旋转的中心，可以使用像素值，可以使用关键字 */
backface-visibility: hidden; /* 设置旋转180度以后背面是否可见 */

        /* 围绕x轴旋转，单位deg - 角度 */
        /* transform: rotateX(60deg); */

        /* 围绕y轴进行旋转 */
        /* transform: rotateY(90deg); */

        /* 以自己的中心点当做原点进行旋转 */
        /* transform: rotate(90deg); */

        transform: rotateY(180deg);
        /* 背面是否可见，默认是可见的 */
        backface-visibility: hidden;

设置旋转的x轴或Y轴

/* 设置旋转原点 */

/* transform-origin: x轴坐标 y轴坐标 */

/* transform-origin: 100px 100px; */

/* transform-origin:center bottom; */

/* transform-origin:center center; */

谎言Palpitate

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2D概念应用

2D、概念、俗称2d变换，指的是基于2d平面的角度，让标签元素发生变化。例如，让盒子移动、让盒子缩放、让盒子旋转。。。平移平移是让盒子在水平方向或垂直方向进行移动。transform: translateX(像素值); /* 水平方向移动，正值向右，负值向左 */transform: translateY(像素值); /* 垂直方向移动，正值向下，负值向上 */transform: translate(水平方向像素值, 垂直方向像素值); /* 复合写法 */<sty
复制链接

扫一扫