HTML5学习之CSS3 2D转换

转换(transform)是CSS3中最具有颠覆性的特征之一,可以实现元素的位移旋转缩放等效果。可以简单的理解为变形。

移动:translate

旋转:rotate

缩放:scale

2D转换是改变标签在二维平面上的位置和形状的一种技术。在X轴和Y轴进行变形。

移动语法:

transform: translate(X轴移动的距离,Y轴移动的距离);
transform: translateX(X轴移动距离);
transform: translateY(Y轴移动距离);

移动盒子的方法有三种:定位改变margin值和2D转换

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

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

translate中的百分比单位是相对于自身元素的translate(50%,50%) 移动的距离是盒子自身宽度和高度的50%

translate对行内元素没有效果。

代码示例:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 移动盒子的位置 三种方法 1定位 2盒子的外边距 3 2D转换*/
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* background-color: pink; */
            /* transform: translateX(200px);
            transform: translateY(200px); */
            /* transform: translate(200px, 200px); */
            transition: all 1s ease-in-out 0s;
        }

        /* 可以看出来 translate移动不影响其他盒子的位置 */
        div:hover {
            transform: translateX(100px);
            transform: translateY(100px);
        }

        div:last-of-type {
            background-color: purple;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* 移动盒子本身宽度的一半 */
            transform: translateX(50%);
        }
    </style>
</head>

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

</html>

盒子居中效果优化:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* 以前的写法 如果宽高变化还得改动 */
            /* margin-top: -100px;
            margin-left: -100px; */
            /* 利用transform 的写法 */
            transform: translate(-50%, -50%);
        }

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

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

</html>

旋转(rotate)

2D旋转指的是让元素在二维平面中进行顺时针或者逆时针的旋转。

语法

transform: rotate(旋转度数);
transform: rotateX(旋转度数);
transform: rotateY(旋转度数);

重点:

rotate 里面跟度数单位是deg 比如rotate(45deg)

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

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

代码示例:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>二维旋转</title>
    <link rel="stylesheet" href="../CSS/font.css">
    <style>
        img {
            width: 150px;
            /* 顺时针旋转90度 */
            /* transform: rotate(90deg); */
            border-radius: 90px;
            border: 1px solid #ccc;
            transition: all 2s ease-in-out 0s;
        }

        img:hover {
            transform: rotate(360deg);
        }

        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #ccc;
            font-family: 'icomoon';

        }

        div:hover::after {
            transform: rotate(225deg);
        }

        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 4px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            transform: rotate(45deg);
            transition: all 0.5s linear 0s;
        }
    </style>
</head>

<body>
    <div></div>
    <img src="../img/pic.jpg" alt="">
</body>

</html>

以上案例都是围绕中心点进行旋转的。那么我们是否可以围绕其他点进行旋转呢?

事实上我们可以通过 transform-origin:x y 设置围绕旋转的点

重点:

注意后面的参数 X Y 用空格隔开

X Y 默认转换的中心点是(50% 50%)

还可以给XY设置像素或者方位名词(top bottom left right center)

示例代码:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            margin-left: 400px;
            margin-top: 400px;
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all 1s linear 0s;
            /* transform-origin: 0% 0%; */
            transform-origin: left top;
        }

        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

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

</html>

旋转实用案例:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>旋转实用案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            margin-left: 100px;
            margin-top: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: hidden;
        }

        p {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.3);
            text-align: center;
            line-height: 200px;
            transition: all 1s linear 0s;
            transform: rotate(180deg);
            transform-origin: left bottom;
        }

        div:hover p {
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
    <div>
        <p>传媒</p>
    </div>
    <div>
        <p>传媒</p>
    </div>
    <div>
        <p>传媒</p>
    </div>
</body>

</html>

缩放(scale)

缩放顾名思义可以放大或者缩小只要给元素添加上了这个属性就能控制它放大还是缩小。

语法:

transform: scale(x,y);

注意:

注意其中的x和y是用逗号分开的

transform:scale(1，1) 宽和高都放大一倍相当于没有放大

transform:scale(2)只写一个值则第二个参数和第一个参数相同相当于transform:scale(2,2)

如果 x和y小于1 则代表缩小

scale缩放最大的优势:可以设置转换中心点缩放,默认是以中心点缩放的。而且不影响其他盒子.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>缩放</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s linear 0s;
            /* 可以设置缩放的中心点 */
            transform-origin: left bottom;
        }

        /* div:hover {
            transform: scale(0.5, 0.5);
        } */
        /* 等比例缩放 只有一个参数时，代表scale(2,2)*/
        div:hover {
            transform: scale(2);

        }
    </style>
</head>

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

</html>

应用实例：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            float: left;
            margin: 10px 10px 0 0;
            overflow: hidden;
        }

        div img {
            transition: all 0.4s ease-in-out;
        }

        div img:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<style>
    div {
        float: lef;
        margin-right: 10px;
    }
</style>

<body>
    <style>
        div {
            float: left;
            margin-right: 10px;
        }
    </style>
    <div><a href="#"><img src="../img/scale.jpg" alt=""></a></div>
    <div><a href="#"><img src="../img/scale.jpg" alt=""></a></div>
    <div><a href="#"><img src="../img/scale.jpg" alt=""></a></div>
</body>

</html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分页按钮</title>
    <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid skyblue;
            list-style: none;
            line-height: 30px;
            margin-right: 10px;
            text-align: center;
            border-radius: 15px;
            transition: all 0.4s;
        }
        
        ul li:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

</html>

2D转换的综合性写法

注意:

同时使用多个转换其格式为 transform: translate() rotate() scale()等

其顺序会影响转换的效果(先旋转会改变坐标轴方向)

当我们同时有位移和其他属性的时候记得要把位移放在最前面

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2D转换综合性写法</title>
    <style>
        /* 
        注意:
        同时使用多个转换 其格式为 transform: translate() rotate() scale()等
        其顺序会影响转换的效果(先旋转会改变坐标轴方向)
        当我们同时有位移和其他属性的时候 记得要把位移放在最前面
        */
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all 1s;
        }

        div:hover {
            transform: translate(100px, 0) rotate(180deg);
        }

        /* 有顺序性 这样不行 */
        /* div:hover {
            transform: rotate(180deg) translate(100px, 0);
        } */
    </style>
</head>

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

</html>