CSS——转换小案例

喜你入骨 提交于 2020-02-27 09:31:57

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>

 

位移:

 

旋转:

缩放:

 

 转换简写:两次结果不同

 

 

 

今天就到这了!!!

 

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!