3D动画六边形旋转

最新推荐文章于 2022-01-10 11:20:34 发布

天翊

最新推荐文章于 2022-01-10 11:20:34 发布

阅读量652

点赞数

本文链接：https://blog.csdn.net/zh_flowers/article/details/106198269

版权

代码如下：

<style>
        body{
            background: linear-gradient(rgb(228, 226, 226) 50%,rgb(109, 109, 106) 100%);
        }
         .fa{   
             width: 300px;
            height: 200px;
            margin: 200px auto;
            transform-style: preserve-3d;
            /* perspective: 1000px; */
            position: relative;
            /* transform: rotateX(-10deg) rotateY(-40deg); */
            animation: identifier 6s infinite linear ;
        }
        @keyframes identifier {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(10deg) rotateY(360deg);
            }
        }
        .fa>div {
            width: 300px;
            height: 200px;
            background-color: pink;
            border: 1px solid #ccc;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
            position: absolute;
            opacity: .3;
        }
        .fa img{
            width: 300px;
            height: 200px;
            -webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,0.5));
        }
        .son01 {
            transform: translateZ(300px);
        }
        .son02 {
            transform: rotateY(60deg) translateZ(300px);
        }
        .son03 {
            transform: rotateY(120deg) translateZ(300px);
        }
        .son04 {
            transform: rotateY(180deg) translateZ(300px);
        }
        .son05 {
            transform: rotateY(240deg) translateZ(300px);
        }
        .son06 {
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="son01">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589804128684&di=1e005ba0a145d6bdf5f60d19e1771738&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201308%2F21%2F20130821052409_jk5Vc.jpeg" alt="">
        </div>
        <div class="son02">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589804128684&di=1e005ba0a145d6bdf5f60d19e1771738&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201308%2F21%2F20130821052409_jk5Vc.jpeg" alt="">
        </div>
        <div class="son03">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589804128684&di=1e005ba0a145d6bdf5f60d19e1771738&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201308%2F21%2F20130821052409_jk5Vc.jpeg" alt="">
        </div>
        <div class="son04">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589804128684&di=1e005ba0a145d6bdf5f60d19e1771738&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201308%2F21%2F20130821052409_jk5Vc.jpeg" alt="">
        </div>
        <div class="son05">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589804128684&di=1e005ba0a145d6bdf5f60d19e1771738&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201308%2F21%2F20130821052409_jk5Vc.jpeg" alt="">
        </div>
        <div class="son06">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589804128684&di=1e005ba0a145d6bdf5f60d19e1771738&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201308%2F21%2F20130821052409_jk5Vc.jpeg" alt="">
        </div>
    </div>
</body>
</html>

效果图

天翊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3D动画六边形旋转

代码如下：<style> body{ background: linear-gradient(rgb(228, 226, 226) 50%,rgb(109, 109, 106) 100%); } .fa{ width: 300px; height: 200px; margin: 200px auto; transfor
复制链接

扫一扫