H5立方体3D动画-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45723045/article/details/103079774

<html>
<head>
    <title>H5立方</title>
    <meta charset="utf-8">
    <style>
        html{
            height: 100%;
            /*径向渐变*/
            background: radial-gradient(circle, #333, #000, #000);
        }
        body{
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            /*perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
            当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
            注释：perspective 属性只影响 3D 转换元素。
            1000px 为界限
            */
            perspective: 1500px;
        }
        main
        {
            width: 300px;
            height: 300px;
            /*使被转换的子元素保留其 3D 转换：*/
            transform-style: preserve-3d;
            animation: 10s spin linear infinite;
        }
        main div
        {
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: 100%;
            border: 1px solid black;
        }
        .font
        {
            background-image: url(/demos/img/pic1.jpg);
            /*translateZ表示元素在Z轴上进行平移*/
            transform: translateZ(150px);
        }
        .back
        {
            background-image: url(/demos/img/pic2.jpg);
            transform: translateZ(-150px);
        }

        .left
        {
            background-image: url(/demos/img/pic3.jpg);
            /*rotate表示旋转，rotateY表示绕着Y轴旋转度数，*/
            transform: rotateY(90deg) translateZ(-150px);
        }
        .right
        {
            background-image: url(/demos/img/pic4.jpg);
            transform: rotateY(90deg) translateZ(150px);
        }

        .top
        {
            background-image: url(/demos/img/pic5.jpg);
            transform: rotateX(90deg) translateZ(-150px);
        }
        .bottom
        {
            background-image: url(/demos/img/pic6.jpg);
            transform: rotateX(90deg) translateZ(150px);
        }

        @keyframes spin
        {
            0%
            {
                transform: rotateX(0) rotateY(0);
            }
            100%
            {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
<main>
    <div class="font"></div>
    <div class="back"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="top"></div>
    <div class="bottom"></div>
</main>
</body>
</html>

旋转正方体加径向渐变