利用CSS中的animation实现立体盒子的旋转

最新推荐文章于 2024-05-16 03:33:23 发布

weixin_47389477

最新推荐文章于 2024-05-16 03:33:23 发布

阅读量480

点赞数 1

文章标签： css css3 html 前端动画

本文链接：https://blog.csdn.net/weixin_47389477/article/details/129225142

版权

该文章演示了如何使用CSS3来实现一个立体盒子，并通过旋转和变换实现3D视觉效果。通过开启perspective和transform-style属性，以及使用@keyframes定义动画，创建了一个子元素在立体空间中旋转的动态效果。当鼠标悬停在盒子上时，盒子会执行特定的旋转动作。

摘要由CSDN通过智能技术生成

实现步骤一、实现立体盒子

实现步骤二、让盒子旋转

注意事项

记得在父级盒子上开启perspective透视，视觉效果有3d感
在最近一级开启 transform-style: preserve-3d;开启子元素立体空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立体盒子的动画</title>
    <style>
        body {
            /* 开启透视 */
            perspective: 1000px;
            
        }
     .box {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: transparent;
        margin: 0 auto;
        margin-top: 100px;
        /* 给子元素开启立体空间 */
        transform-style: preserve-3d;
        /* transition:all .5s */
        transform: rotate3d(1,1,0,15deg);
        animation: move 10s 1s infinite ;
       

     }
     .box:hover {
        /* transform: rotateX(90deg); */
     }
     .box div[class^='son'] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
     }
     .box .son6 {
        background-color: yellow ;
        transform: rotateX(90deg) translateZ(-100px);

     }
     .box .son5 {
        background-color: rgb(72, 255, 0) ;
        transform: rotateX(90deg) translateZ(100px);
     }
     .box .son4 {
        background-color: rgb(0, 225, 255) ;
        transform: rotateY(90deg) translateZ(-100px) ;
     }
     .box .son3 {
        background-color: rgb(55, 0, 255) ;
        transform: rotateY(90deg) translateZ(100px) ;
     }
     .box .son2 {
        background-color: #ff00dd ;
        transform:   translateZ(100px);
     }
     .box .son1 {
        background-color: rgb(255, 0, 0) ;
        transform: translateZ(-100px) ;
     }

     @keyframes move {
        0% {}
        20% {
            transform: rotateX(30deg) translate3d(200px,0,0);

        }
        40% {
            transform: rotateX(60deg) translate3d(400px,0,0);
        }
        60% {
            transform: rotateX(90deg) translate3d(400px,-400px,0);
        }
        80% {
            transform: rotateX(120deg) translate3d(200px,-400px,0);
        }
        100% {
            transform: rotateX(150deg) translate3d(0,0,0);
        }
     }
    </style>
</head>
<body>
    <div class="box">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
        <div class="son4"></div>
        <div class="son5"></div>
        <div class="son6"></div>
    </div>
</body>
</html>