css3 实现动画【小案例】

最新推荐文章于 2025-04-27 13:59:36 发布

Vvc_b

最新推荐文章于 2025-04-27 13:59:36 发布

阅读量777

点赞数 18

分类专栏： CSS 文章标签： css3 前端 css

本文链接：https://blog.youkuaiyun.com/m0_74897683/article/details/143195366

版权

CSS 专栏收录该内容

10 篇文章

订阅专栏

案例1：

效果展示：

3D立方体

代码展示：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrap{
        width: 200px;
        height: 200px;
        margin: 200px auto;
        perspective: 500px;
    }
    .wrap-box{
        width: 200px;
        height: 200px;
        transform-style: preserve-3d; /*使被嵌套的子元素保持3d效果 ，放在父元素*/
        position: relative;
        transition: 1.0s;
    }
    .wrap-box:hover{
        transform: rotate3d(1,1,0,45deg)
    }
    .wrap-box div{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        position: absolute;
    }
    .wrap-box .front{
        transform: translateZ(100px);
    }
    .wrap-box .back{
        transform: translateZ(-100px);
        
    }
    .wrap-box .left{
        transform: rotateY(90deg) translateZ(100px);
        
    }
    .wrap-box .right{
        transform: rotateY(-90deg) translateZ(100px);
    }
    .wrap-box .top{
        transform: rotateX(90deg) translateZ(100px);
    }
    .wrap-box .bottom{
        transform: rotateX(-90deg) translateZ(100px);
    }
</style>
<body>
    <div class="wrap">
        <div class="wrap-box">
            <div class="front">前</div>
            <div class="back">后</div>
            <div class="left">左</div>
            <div class="right">右</div>
            <div class="top">上</div>
            <div class="bottom">下</div>
            
        </div>
    </div>
</body>

说明！！：在使用3D效果的时候， perspective 属性一定要加！！，通常设置在父元素中，同时当父元素嵌套多个子元素时，要配合transform-style属性使用，其值为preserve-3d！！，作用是当使被嵌套的子元素设置3D效果时，效果能够正确的展现，也是设置在父元素中。

案例2：

效果展示：

图片翻转

代码展示：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrap{
        width: 200px;
        height: 200px;
        margin: 200px auto;
        perspective: 500px;
    }
    .wrap-box{
        transform-style: preserve-3d;
        width: 200px;
        height: 200px;
        position: relative; /* 加上定位使两张图片重叠*/
        transition: all 1s;
    }
    .wrap:hover .wrap-box{
        transform: rotateY(180deg);
    }
    .wrap-box img:nth-child(2){
        transform: rotateY(180deg);
        
    }
    .wrap-box img{
        width: 100%;
        height: 100%;
        position: absolute;
        backface-visibility: hidden;/*使背面不可见！！ */
    }

</style>
<body>
    <div class="wrap">
        <div class="wrap-box">
            <img src="a.jpg" alt="">
            <img src="c.jpg" alt="">
        </div>
    </div>
</body>

说明：图片翻转的动画要加 backface-visibility: hidden 使元素的背面看不见，其他同上。

案例3：

效果展示：

开门动画

代码展示：

<style type="text/css">
    *{
        margin: 0;
        height: 0;
    }
    body{
        background-color: black;
    }
    .wrap{
        width: 150px;
        height: 250px;
        background-color: white;
        margin: 200px auto;
        perspective: 500px;
    }
    .wrap div{
        width: 150px;
        height: 250px;
        background-color: black;
        transition: transform 1.5s;
        transform-origin: right;  /*以右侧为中心旋转*/
    }
    .wrap div:hover{
        transform: rotateY(-60deg);
    }
</style>
<body>
    <div class="wrap">
        <div></div>
    </div>
</body>

知识小天地：

perspective 属性：

perspective属性用于创建3D空间中的透视效果，它定义了观察者与Z=0平面的距离，从而影响3D元素的透视效果。
当元素的Z轴值大于0时，它们看起来比实际大，而当Z轴值小于0时，它们看起来比实际小。这种效果的强度由perspective属性的值决定。
如果perspective属性的值较小，透视效果会更显著；如果值较大，则透视效果较弱。
在实际应用中，perspective属性通常设置在父元素上，而3D变换（如rotateX、rotateY、translateZ等）则应用于子元素。这样，子元素相对于父元素的perspective属性值产生透视效果。