css 2D转换之旋转rotate

黄丫丫07

已于 2022-11-27 15:55:58 修改

阅读量849

点赞数

文章标签： css css3 html

于 2022-11-27 15:08:29 首次发布

本文链接：https://blog.csdn.net/m0_51495354/article/details/128064646

版权

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

语法：transform：rotate（度数）；

重点：

Rotate里面跟度数，单位是deg 比如rotate（45deg）
角度为正时，顺时针，负时，逆时针
默认旋转的中心是元素的中心点

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        img {

            width: 100px;



            border-radius: 80px;

            border: 3px solid pink;

            /* 过渡写到本身上，谁做动画给谁加 */

            transition: all 1s;

        }



        img:hover {

            /* 顺时针旋转45度 */

            transform: rotate(360deg);

        }

    </style>

</head>



<body>

    <img src="images/gwm.jpg" alt="">

</body>



</html>

案例：三角

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>css3书写三角</title>

    <style>

        .box {

            position: relative;

            width: 250px;

            height: 35px;

            border: 1px solid #000;

        }



        .box::after {

            content: '';

            position: absolute;

            top: 7px;

            right: 15px;

            width: 10px;

            height: 10px;

            border-bottom: 1px solid #000;

            border-right: 1px solid #000;

            transform: rotate(45deg);

            transition: all;

        }



        /* 鼠标经过div 里面的三角旋转 */

        div:hover::after {

            transform: rotate(225deg);

        }

    </style>

</head>



<body>

    <div class="box">



    </div>

</body>



</html>

设置转换中心点：transform-origin

我们可以设置元素转换的中心点

语法：tranform-origin：x y；

重点：

注意后面的参数x和y用空格隔开
X y 默认转换的中心是元素的中心点（50% 50%）
还可以给x y设置像素或者方位名词（top bottom left right center）

案例：旋转案例

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        div {

            overflow: hidden;

            margin: 0 auto;

            position: relative;

            width: 200px;

            height: 200px;

            border: 1px solid pink;

            transition: all 5s;

        }



        div::before {

            content: '啊~xswl';

            position: absolute;

            width: 100%;



            height: 200px;

            background-color: aquamarine;

            transform: rotate(90deg);

            transform-origin: left bottom;

            transition: all 1s;



        }



        div:hover::before {

            transform: rotate(0);

        }

    </style>

</head>



<body>

    <div></div>

</body>



</html>