CSS 中的 rotate

最新推荐文章于 2023-08-05 22:23:09 发布

尼古丁beta

最新推荐文章于 2023-08-05 22:23:09 发布

阅读量1w

点赞数

本文链接：https://blog.csdn.net/zyhTobacco/article/details/107383901

版权

在 CSS 坐标系中，从左到右为 X 轴正方向，从上到下为 Y 轴正方向，从屏幕里到屏幕外为 Z 轴正方向。

当观察者视线方向顺着 X 轴正方向，rotateX 为正表示元素逆时针旋转，为负表示元素顺时针方向旋转；

当观察者视线方向顺着 Y 轴正方向，rotateY 为正表示元素逆时针旋转，为负表示元素顺时针方向旋转；

当观察者视线方向顺着 Z 轴正方向，rotateZ 为正表示元素逆时针旋转，为负表示元素顺时针方向旋转。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS3立方体旋转动画</title>

    <style>
        * {
            margin: 0 auto;
            padding: 0;
        }

        div.wrap {
            width: 120px;
            height: 120px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%); /*利用位移来处理垂直水平居中*/
        }

        .wrap > div.cube {
            width: 120px;
            height: 120px;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg); /*旋转*/
            animation: move 20s infinite linear; /*动画*/
        }

        /*关键帧*/
        @keyframes move {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        .cube > div {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0.8;
            transition: all 0.4s ease-in-out, box-shadow 0.4s ease-in-out; /*过渡 属性 时间 过渡曲线*/
        }

        .cube div.out-front {
            transform: translateZ(60px); /*转换  位移*/
        }

        .cube div.out-back {
            transform: translateZ(-60px) rotateY(180deg); /*转换 位移 旋转*/
        }

        .cube div.out-left {
            transform: translateX(-60px) rotateY(-90deg);
        }

        .cube div.out-right {
            transform: translateX(60px) rotateY(90deg);
        }

        .cube div.out-top {
            transform: translateY(-60px) rotateX(90deg);
        }

        .cube div.out-bottom {
            transform: translateY(60px) rotateX(-90deg);
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="cube">
        <div class="out-front"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube01.bmp"></div>
        <div class="out-back"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube02.bmp"></div>
        <div class="out-left"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube03.bmp"></div>
        <div class="out-right"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube04.bmp"></div>
        <div class="out-top"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube05.bmp"></div>
        <div class="out-bottom"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube06.bmp"></div>
    </div>
</div>
</body>
</html>

请注意看 out-front(cube01)

的左边，也就是 out-left(cube03)

，

其 transform 值有translateX(-60px)，以及 out-front(cube01) 的右边，也就是 out-right(cube04)

，

其 transform 值有 translateX(60px)，说明从左到右为 X 轴正方向；

out-front(cube01) 的上边，也就是 out-top(cube05)

，

其 transform 值有 translateY(-60px)，以及 out-front(cube01) 的下边，也就是 out-bottom(cube06)

，

其 transform 值有translateY(60px)，说明从上到下为 Y 轴正方向;

out-front(cube01) 其 transform 值有 translateZ(60px)，out-back(cube02) 其 transform 值有 translateZ(-60px)，

说明从屏幕里到屏幕外为 Z 轴正方向。

而且，out-left(cube03) 的 transform 有值 rotateY(-90deg)，out-right(cube04) 的 transform 有值 rotateY(90deg)，

印证了当观察者视线方向顺着 Y 轴正方向，rotateY 为正表示元素逆时针旋转，为负表示元素顺时针方向旋转；

同样，out-top(cube05) 的 transform 有值 rotateX(90deg)，out-bottom(cube06) 的 transform 有值 rotateX(-90deg)，

印证了当观察者视线方向顺着 X 轴正方向，rotateX 为正表示元素逆时针旋转，为负表示元素顺时针方向旋转；

该样例中没有用到rotateZ，读者可以试下给 out-front(cube01) 的 div 加上 ratateZ，就能明显地查看到效果，

        .cube div.out-front {
            transform: translateZ(60px) rotateZ(90deg); /*转换  位移*/
        }

从效果来看也印证了当观察者视线方向顺着 Z 轴正方向，rotateZ 为正表示元素逆时针旋转，为负表示元素顺时针方向旋转。

尼古丁beta

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CSS 中的 rotate

在 CSS 坐标系中，从左到右为 X 轴正方向，从上到下为 Y 轴正方向，从屏幕里到屏幕外为 Z 轴正方向。<div class='translateOut'> <div class='translate2d'></div></div><style> .translateOut{ width: 500px; height: 500px;border: 3px solid orange; } .
复制链接

扫一扫