CSS——转换小案例

CSS中的转换：transform

位移

transform：translate（x，y）；水平方向x和垂直方向y，值为数字或者百分比

transform：translateX（num）；水平方向

transform：translateY（num）；垂直方向

转换中位移最大的优点：不影响其他盒子的位置

里面的百分比是参照自身的宽高

旋转

transform：rotate（num deg）；单位为deg

旋转时默认为元素的中心点旋转

变换的中心点

transform-origin：x y；默认为center center

x、y的值可以是数值、百分比、方位名词（top left bottom right center）

缩放

transform：scale（x，y）；水平方向（宽），垂直方向（高）

transform：scale（num）； num>1 为放大倍数 num<1 为缩小倍速

等比列缩放，指定宽，高会自适应的等比列的缩放

缩放的优点：不影响其他盒子，可以设置缩放变换的中心点

转换的简写形式

对于转换来说，可以同时进行旋转、缩放、位移的操作，但是这些组合的写法不同，最后变换的结果也是不同的。

转换的简写形式，浏览器解析是从右往左进行解析的

变换的时候，其实坐标轴也是在变换的

            *       旋转中，坐标轴也跟着旋转了30度

            *   浏览器解析过程：元素先向右平移300px，然后再旋转30度角——坐标轴也跟着转了30度

这样就可以解释为什么两次转换结果不一样

transform: rotate(30deg) translateX(300px);

            /* 先位移再旋转 */

            /* transform: translateX(300px) rotate(30deg); */

            /* 两次变换的最终位置不一样 */

上面知识点的案例和效果图

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转换案例</title>
    <style>
        .warp {
            width: 1000px;
            height: 2000px;
            margin: 0 auto;
        }

        .warp>div {
            margin-top: 50px;
        }

        /* 1.位移 translate ：不影响其他盒子 只动自身*/
        .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 向右向下移动100px */
            /* transform: translate(100px, 100px); */
            /* 只移动水平方向 */
            transform: translateX(100px);
            /* 只移动垂直方向上 */
            /* transform: translateY(100px); */
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: purple;
        }

        /* 2. 旋转 rotate */
        .box3 {
            position: relative;
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid blue;
        }

        /* 鼠标经过box3时  里面的盒子旋转120deg 
        .box3:hover .box3_in {
            transform: rotate(120deg);
        }

         .box3_in {
            水平垂直居中
            position: absolute;
            top: 200px;
            left: 200px;
            margin-left: -100px;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
            谁有动画过渡写在谁身上
            transition: all 2s;
        } */

        /* 鼠标经过盒子3时，里面的盒子转进来 */
        .box3:hover .box3_in {
            transform: rotate(0deg);
        }

        .box3_in {
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: rotate(90deg);
            /* 谁有动画过渡写在谁身上 */
            transition: all 2s;
            /* 设置转换中心点为左下角 */
            transform-origin: left bottom;
        }

        /* 3.缩放 scale ：不影响其他盒子的位置*/
        .box4 {
            width: 200px;
            height: 200px;
            background-color: blue;
            transition: all .5s linear;
        }

        /* 鼠标经过时，进行缩放*/
        .box4:hover {
            /* 高宽放大1.2倍 */
            transform: scale(1.2);
            /* 水平宽度放大2倍 */
            /* transform: scaleX(2); */
            /* 垂直高度放大2倍 */
            /* transform: scaleY(2); */
        }

        /* 分页按钮 */
        .btn {
            margin-top: 100px;
            overflow: hidden;
        }

        .btn_list {
            float: left;
            list-style: none;
            width: 50px;
            height: 50px;
            border: 1px solid #666666;
            margin-left: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            /* 添加过渡效果 */
            transition: all .3s;
        }

        /* 鼠标经过时，页面变大 */
        .btn_list:hover {
            transform: scale(1.2);
            font-size: 25px;
            /* line-height: 60px; */
        }

        /* 转换简写属性：最好把位移写在最前面 */
        .box5 {
            width: 300px;
            height: 300px;
            background-color: saddlebrown;
            transition: all 1s;
        }

        .box5:hover {
            /* 先旋转30度 再平移300px 
            *   变换的时候，其实坐标轴也是在变换的
            *       旋转中，坐标轴也跟着旋转了30度
            *   浏览器解析过程：元素先向右平移300px，然后再旋转30度角
            */
            transform: rotate(30deg) translateX(300px);
            /* 先位移再旋转 */
            /* transform: translateX(300px) rotate(30deg); */

            /* 两次变换的最终位置不一样 */
        }
    </style>
</head>

<body>
    <div class="warp">
        <!-- 1. 位移 translate -->
        <div class="box1"></div>
        <div class="box2"></div>
        <!-- 2.旋转 rotate -->
        <div class="box3">
            <!-- 改变变换中心点，可以实现不同的变换，默认转换中心点为中心位置 -->
            <div class="box3_in"></div>
        </div>
        <!-- 3.缩放 scale -->
        <div class="box4"></div>
        <!-- 缩放做出的分页按钮：鼠标经过时按钮变大 -->
        <div class="btn">
            <ul>
                <li class="btn_list">1</li>
                <li class="btn_list">2</li>
                <li class="btn_list">3</li>
                <li class="btn_list">4</li>
                <li class="btn_list">5</li>
                <li class="btn_list">6</li>
                <li class="btn_list">7</li>
            </ul>
        </div>
        <!-- 4.转换的简写形式 -->
        <!-- 最好把位移写在最前面 -->
        <div class="box5"></div>
    </div>
</body>

</html>

位移：