HTML5学习之CSS3 2D转换

时间:2020-01-18
本文章向大家介绍HTML5学习之CSS3 2D转换,主要包括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>

 

$flag 上一页 下一页