魔方

最新推荐文章于 2023-12-16 16:50:53 发布

前端菜菜鸟

最新推荐文章于 2023-12-16 16:50:53 发布

阅读量101

点赞数

文章标签： css 旋转动画

本文链接：https://blog.csdn.net/zh994990183/article/details/99684446

版权

 <style>

        * {
            box-sizing: border-box;
        }

        html {
            height: 100%;
        }

        body {
            margin: 0;
            height: 100%;
            background: radial-gradient(circle, #333, #000 50%);
            position: relative;
            /* 控制自己内部标签的转化样式 */
            /* transform-style: preserve-3d; */
            perspective: 1000px;

        }

        main {
            width: 300px;
            height: 300px;
            /* outline 轮廓线 dashed 虚线 */
            outline: 2px dashed red;
            /* 使用绝对定位进行元素居中 */
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            transform-style: preserve-3d;
            animation-name: rotate;
            animation-duration: 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        @keyframes rotate {
            0% {
                transform: rotateX(0) rotateZ(0);
            }

            100% {
                transform: rotateX(360deg) rotateZ(360deg);
            }
        }

        .surface {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.5;
            box-shadow: 0 0 10px #fff;
            font-size: 40PX;
            color: white;
            /* text-align: center; */
            
        }

        /* 在浏览器环境中，每一个元素都有自己的坐标系
            元素的任何的变形，都是所在坐标系的变形，而不是元素本身 */
        .top {
            background-color: red;
            /* 想象旋转轴指向自己，正方向为正值 */
            transform: rotateX(90deg) translateZ(150px);
        }

        .bottom {
            background: orange;
            transform: rotateX(-90deg) translateZ(150px);
        }

        .left {
            background-color: yellow;
            transform: rotatey(90deg) translateZ(-150px);
        }

        .right {
            background-color: green;
            transform: rotatey(-90deg) translateZ(-150px);
        }

        .front {
            background-color: blue;
            /* 平移 */
            transform: translateZ(150px);
        }

        .back {
            background-color: purple;
            transform: translateZ(-150px) rotateX(180deg);
        }
    </style>
</head>

<body>
    <main>
        <div class="surface top">1</div>
        <div class="surface bottom">2</div>
        <div class="surface left">3</div>
        <div class="surface right">4</div>
        <div class="surface front">5</div>
        <div class="surface back">6</div>
    </main>
</body>