css3样式实现正方体旋转效果

最新推荐文章于 2024-05-17 10:26:44 发布

critans

最新推荐文章于 2024-05-17 10:26:44 发布

阅读量732

点赞数 1

文章标签： css3 前端 html

本文链接：https://blog.csdn.net/critans/article/details/127335719

版权

如视频的正方体

旋转正方体

css3实现这个正方体需要用到transform样式以及animation样式

具体结构：

<body>
    <div class="father">
        <div class="one">
            <img src="D:/wallpaper/2020 五月/11_4k.jpg">
        </div>
        <div class="two">
            <img src="D:/wallpaper/2020 五月/12_4k.jpg">
        </div>
        <div class="three">
            <img src="D:/wallpaper/2020 五月/13_4k.jpg">
        </div>
        <div class="four">
            <img src="D:/wallpaper/2020 五月/14_4k.jpg">
        </div>
        <div class="five">
            <img src="D:/wallpaper/2020 五月/16_4k.jpg">
        </div>
        <div class="six">
            <img src="D:/wallpaper/2020 五月/17_4k.jpg">
        </div>
    </div>
</body>

具体思路：正方体有六个面，给一个父盒子，父盒子里给六个子盒子作为六个面，利用transform样式把六个面排成正方体，最后使用动画旋转父盒子即可。

父盒子样式：

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

     body{
            perspective: 2000px;//给父盒子的父元素即body标签透视效果
        }

    .father {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 200px auto;
            transform-style: preserve-3d;//使子元素以3D效果显示
            animation: fast 10s ease-in-out infinite;
        }
</style>

子盒子样式：

<style>
         //给子盒子公有样式，使用定位将子盒子定位在一起
        .father div {
            position: absolute;
            width: 400px;
            height: 400px;
            padding:31px;
            background-image:  linear-gradient(to right,#00aaf7,#6dcedf);
        }
        
        .father div img {
            width: 400px;
            height: 400px;
        }
        
        /*
        使用transform :translateZ将子盒子沿z轴平移一段距离后使用rotateX和rotateY将子盒子绕                    
        xy轴旋转成正方体的样子
        */
        
        .father .one {
            transform:  rotateY(0deg) ;
        }
        
        .father .two {
            transform:  rotateY(90deg) translateZ(231px);
        }
        
        .father .three {
            transform:  rotateY(180deg) translateZ(231px);
        }
        
        .father .four {
            transform:  rotateY(270deg) translateZ(231px);
        }
        
        .father .five {
            transform:  rotateX(90deg)  translateZ(231px);
        }
        .father .six {
            transform:  rotateX(-90deg) translateZ(231px);
        }
</style>

最后父盒子调用动画即可:animation: fast 10s ease-in-out infinite;

动画样式：

<style>
    /* 定义动画 */

        @keyframes fast {
            0%{
                transform: rotateX(0deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
</style>