前端入门——快速理解H5+css中的旋转

最新推荐文章于 2024-01-08 10:21:37 发布

xiaoH_ing

最新推荐文章于 2024-01-08 10:21:37 发布

阅读量2.8k

点赞数 4

分类专栏：旋转文章标签： css3 html

本文链接：https://blog.csdn.net/Hr_ving/article/details/119421438

版权

旋转专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端入门——快速理解H5+css中的旋转

说到旋转，那么必然要确定两个条件，旋转原点和旋转方向。

旋转原点：顾名思义，即旋转是绕着哪个点来进行旋转的

旋转方向：即绕着哪个方向进行旋转的

实现效果前，先介绍一下几个css属性：

变形原点：

transform-orgin: x , y ; (2d用法)

transform-origin: x , y , z ; （3d用法）

x 可能的值为： top、 center、 bottom；（原点的垂直方向位置）

y可能的值为： left、 center、 right；（原点的水平方向位置）

z可能的值为： … 、-1、 0、1、2、 …

旋转：

2d旋转

transform: rotate( 旋转的角度 );

绕原点进行旋转，括号内填角度值，默认为顺时针旋转（角度值为负，则为逆时针旋转）

3d旋转

transform: rotate3d( 是否绕x轴旋转，是否绕x轴旋转，是否绕x轴旋转，旋转的角度);

前三个值填 1 表示是，填 0 表示否

最后一个值填旋转的角度

旋转的方向都默认为顺时针
注意：需从轴线箭头方向向着（0，0，0）坐标方向看

3d转换

transform-style : preserve-3d;

浏览器默认的所有标签为2d，想要实现3d的效果，就必须将需要实现3d效果的标签的父级设置该属性, 即：将父级设置成一个3d空间，
让子级在3d空间中进行3d操作

2d的旋转

在这里插入图片描述
简单演示：

<!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>
        /*清除浏览器的默认边距*/
        *{
            margin: 0;
            padding: 0;
        }
        /*这是一个父级盒子，里面有两个小盒子*/
        div{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin: 100px auto; /*将盒子放在浏览器中间*/
        }
        /*第一个小盒子*/
        p{
           width: 50px;
           height: 50px;
           background-color: pink;
           /*不设置原点则默认为盒子中心*/
           /*绕盒子中心点顺时针旋转60度*/
           transform: rotate(60deg);
        }
        /*第二个小盒子*/
        h2{
            width: 50px;
            height: 50px;
            background-color: skyblue;

            /*设置原点*/
            transform-origin: left top;
            /*绕左上角顺时针旋转30度*/
            transform: rotate(30deg);
        }
    </style>
</head>
<body>
    <div>
        <p>1</p>
        <h2>2</h2>
    </div>
</body>
</html>

3d的旋转

在这里插入图片描述
简单演示：

<!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>
        /*清除浏览器的默认边距*/
        *{
            margin: 0;
            padding: 0;
        }
        /*这是一个父级盒子，里面有一个小盒子*/
        div{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin: 100px auto; /*将盒子放在浏览器中间*/

            /*形成3d空间*/
            transform-style: preserve-3d;
        }

        /*一个小盒子*/
        p{
           width: 50px;
           height: 50px;
           background-color: pink;
           /*不设置原点则默认为盒子中心*/
           /*盒子绕着x轴转60du，再绕着y轴转60度*/
           transform: rotate3d( 1,1,0,60deg);
        }
    </style>
</head>
<body>
    <div>
        <p>1</p>
    </div>
</body>
</html>