前端3d旋转动画---------- transform: rotate3d()；

叶不休

已于 2024-08-21 22:51:36 修改

阅读量56

点赞数

分类专栏：前端文章标签：前端 3d css css3 html html5 chrome

于 2024-08-21 22:51:08 首次发布

本文链接：https://blog.csdn.net/weixin_58694594/article/details/141404407

版权

前端专栏收录该内容

58 篇文章 1 订阅

订阅专栏

transform: rotateX(30deg);

transform: rotateY(30deg);

transform: rotateZ(30deg);

transform: rotate3d(0,0,1,30deg);

对应X,y,z轴

<!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>
        .box{
            width: 500px;
            height: 500px;
            border: 5px solid black;
            display: flex;
            transform-style: preserve-3d;
            transform: rotateY(30deg);
        }
        .center{
            width: 200px;
            height: 200px;
            background: red;
            margin: auto;

            /* transform: rotateX(30deg); */
            /* transform: rotateY(30deg);
            transform: rotateZ(30deg); */
            transform: rotate3d(0,0,1,30deg);
            /* 对应X,y,z轴 */

        }
    </style>
</head>
<body>
    <div class="box">
        <div class="center"></div>
    </div>
</body>
</html>