CSS3实现3D球体旋转动画

最新推荐文章于 2024-07-08 19:08:25 发布

小白知浅

最新推荐文章于 2024-07-08 19:08:25 发布

阅读量5.3k

点赞数 2

本文链接：https://blog.csdn.net/HY909475/article/details/88789531

版权

本文介绍如何使用CSS3创建一个3D球体，并实现动态旋转的动画效果，通过transform属性和关键帧动画来实现视觉上的立体旋转。

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

CSS3实现3D球体旋转动画

html

<div class="ball-box">
    <div class="ball">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
        <div class="line5"></div>
    </div>
</div>

css

<style type="text/css">
    body{
        background-color: #000000;
    }
    .ball-box{
        width: 300px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -150px 0 0 -150px;
        -webkit-perspective-origin: 50% 50%;
        -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
        -o-perspective-origin: 50% 50%;
        perspective-origin: 50% 50%;
        -webkit-perspective: 3000px;
        -moz-perspective: 3000px;
        -ms-perspective: 3000px;
        -o-perspective: 3000px;
        perspective: 3000px;
    }