2021-11-16 今天学习了h5的动画效果，并且制作了一个旋转的立方体，贴了一些QQ飞车的照片，回忆一下自己的童年。

最新推荐文章于 2024-07-15 16:30:05 发布

Magnetic达

最新推荐文章于 2024-07-15 16:30:05 发布

阅读量97

点赞数

文章标签：动画 css3 3d

本文链接：https://blog.csdn.net/Magnrticda/article/details/121357301

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: #afffe2;
            overflow: hidden;
        }

        .threeD {
            transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
        }
        .content {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 400px;
            height: 400px;
            margin: auto;
            transform-origin: 50% 50% -100px;
            -ms-transform-origin: 50% 50% -200px;
            -webkit-transform-origin: 50% 50% -200px;
            animation: allRot2 20s linear infinite;
            -ms-animation: allRot2 20s linear infinite;
            -webkit-animation: allRot2 20s linear infinite;
        }

        .cube {
            position: absolute;
            left: 0;
            right: 0;
            top: 0px;
            bottom: 0;
            margin: auto;
            transform: rotateX(60deg);
            -ms-transform: rotateX(60deg);
            -webkit-transform: rotateX(60deg);
        }

        .cube > div {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        @keyframes allRot {
            0% {
                transform: rotateX(0deg);
            }

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

        @keyframes allRot2 {
            0% {
                transform: rotate3d(1,1,0,0deg) rotateX(0deg) rotateY(0deg);
                -ms-transform: rotate3d(1,1,0,0deg) rotateX(0deg) rotateY(0deg);
                -webkit-transform: rotate3d(1,1,0,0deg) rotateX(0deg) rotateY(0deg);
            }

            100% {
                transform: rotate3d(1,1,0,360deg) rotateX(360deg) rotateY(360deg);
                -ms-transform: rotate3d(1,1,0,360deg) rotateX(360deg) rotateY(360deg);
                -webkit-transform: rotate3d(1,1,0,360deg) rotateX(360deg) rotateY(360deg);
            }
        }

        .big {
            width: 200px;
            height: 200px;
        }

        .big > div {
            opacity: 0.7;
            transform-origin: 50% 50% -100px;
            -ms-transform-origin: 50% 50% -100px;
            -webkit-transform-origin: 50% 50% -100px;
        }

        .cube > div > img {
            width: 100%;
            height: 100%;
        }
        .cube > div:nth-child(1) {
            top: 0px;
            left: 0px;
        }
        .cube > div:nth-child(2) {
            transform: rotateX(90deg);
            -ms-transform: rotateX(90deg);
            -webkit-transform: rotateX(90deg);
        }
        .cube > div:nth-child(3) {
            transform: rotateY(-90deg);
            -ms-transform: rotateY(-90deg);
            -webkit-transform: rotateY(-90deg);
        }
        .cube > div:nth-child(4) {
            transform: rotateY(90deg);
            -ms-transform: rotateY(90deg);
            -webkit-transform: rotateY(90deg);
        }
        .cube > div:nth-child(5) {
            transform: rotateX(-90deg);
            -ms-transform: rotateX(-90deg);
            -webkit-transform: rotateX(-90deg);
        }

        .cube > div:nth-child(6) {
            transform: rotateY(180deg);
            -ms-transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
        }
    </style>
</head>
<body>
<div class="threeD content">
    <div class="threeD cube big">
        <div><img src="Images/1.jpg" alt="" /> </div>
        <div><img src="Images/2.jpeg" alt="" /> </div>
        <div><img src="Images/3.jpeg" alt="" /> </div>
        <div><img src="Images/4.jpeg" alt="" /> </div>
        <div><img src="Images/5.jpeg" alt="" /> </div>
        <div><img src="Images/6.jpg" alt="" /> </div>
    </div>
</div>
</body>
</html>

Magnetic达

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-11-16 今天学习了h5的动画效果，并且制作了一个旋转的立方体，贴了一些QQ飞车的照片，回忆一下自己的童年。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> * { margin: 0; padding: 0; }...
复制链接

扫一扫