CSS 3D旋转效果

最新推荐文章于 2024-07-25 10:18:55 发布

蜂蜜柚子茶り

最新推荐文章于 2024-07-25 10:18:55 发布

阅读量1.7k

点赞数 1

文章标签： css 3d css3

本文链接：https://blog.csdn.net/qq_53322582/article/details/123213847

版权

俗称3D变换，指基于3D立体的角度来设置盒子。比如将盒子设置为立方体。3D的效果跟2D是一样的，有平移和旋转，不同点在于，2D只有x轴和y轴，3D会多一个z轴，用于表示立体。

3D的效果通过需要远距离观察才能看出立体效果，因为距离太近，我们只能看出平面的2D效果，这就需要在设置3D变换效果之前，需要先设置景深（一般来说景深设置在900px-1200px之间就可以）：

perspective: 1200px; /* 在父元素中使用,设置景深 */

我们还需要设置从屏幕的哪个点来观察屏幕内部的3d效果：

perspective-origin: 50% 50%; /* origin是原点，width和height各设置50% */

对于3D的效果来讲，同样具有平移和旋转，但因为平移和旋转同样适用于2D效果，所以我们还需要告诉浏览器当前场景是在3D效果下进行的：

transform-style：preserve-3d; /* 表示在3d空间中展示 */

旋转

旋转指让盒子绕着x轴或y轴进行旋转。语法：

transform: rotateX(旋转的角度); /* 绕着x轴旋转多少角度 */
transform: rotateY(旋转的角度); /* 绕着y轴旋转多少角度 */
transform: rotateZ(旋转的角度); /* 绕着z轴旋转多少角度 */

平移

平移是让盒子在水平方向或垂直方向进行移动。语法：

transform: translateX(像素值); /* 水平方向移动，正值向右，负值向左 */
transform: translateY(像素值); /* 垂直方向移动，正值向下，负值向上 */
transform: translateZ(像素值); /* z轴方向移动，正值距离眼睛更近，负值距离眼睛更远 */
transform: translate3d(水平方向像素值, 垂直方向像素值, z轴方向像素值); /* 复合写法 */

因为2D效果并不明显，所以就要利用3D效果制作立方体：

<style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 50px auto;

            position: relative;
            /* 景深 */
            perspective: 1200px;
            /* 过渡元素：css属性 时间 */
            transition: all 5s;
            /* 从2d变3d */
            transform-style:preserve-3d; 
             /* origin是原点，width和height各设置50% */
            perspective-origin: 50% 50%;
        }
        .box>div{
            width: 100px;
            height: 100px;
            position:absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            line-height: 100px;
            /* 透明度 */
            opacity: 0.5;
        }

        .box div:nth-child(1){
            bottom:200px;
            background-color: blue;
            transform: rotateX(-90deg);
            transform-origin:bottom;
        }
        .box div:nth-child(2){
            left: 200px;
            background-color: pink;
            transform: rotateY(-90deg);
            transform-origin: left;
        }
        .box div:nth-child(3){
            right: 200px;
            transform: rotateY(90deg);
            transform-origin:right;
            background-color: #dadada;
        }
        .box div:nth-child(4){
            bottom: -200px;
            transform:rotateX(90deg);
            transform-origin: top;
            background-color: blueviolet;
        }
        .box div:nth-child(5){
            background-color: skyblue;
        }
        .box div:nth-child(6){
            transform: translateZ(100px);
            background-color: lawngreen;
        }

        .box:hover{
        transform: rotateY(180deg) rotateX(360deg);
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
    </div>

PS：这里本来可以不用伪类选择器的，我忘了已经给每个小div加了class。

这就是用3D旋转实现的效果，鼠标放在黑色边框里会开始旋转，移开鼠标会旋转回原本的状态。

PS：在把旋转transform: rotateY(180deg) rotateX(360deg);的两个数值设置成更加大的数值时就会出现十分鬼畜的一幕。

蜂蜜柚子茶り

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
CSS 3D旋转效果

俗称3D变换，指基于3D立体的角度来设置盒子。比如将盒子设置为立方体。3D的效果跟2D是一样的，有平移和旋转，不同点在于，2D只有x轴和y轴，3D会多一个z轴，用于表示立体。3D的效果通过需要远距离观察才能看出立体效果，因为距离太近，我们只能看出平面的2D效果，这就需要在设置3D变换效果之前，需要先设置景深（一般来说景深设置在900px-1200px之间就可以）：perspective: 1200px; /* 在父元素中使用,设置景深 */我们还需要设置从屏幕的哪个点来观察屏幕内部的3d效果：
复制链接

扫一扫