用css实现一个硬币旋转的效果

本文转载自查看原文 2021-11-14 19:36 110 CSS集合

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>银币旋转效果</title>
        <style>
            #euro {
                width: 150px;
                height: 150px;
                margin-left: -75px;
                margin-top: -75px;
                position: absolute;
                background: red;
                border-radius: 50%;
                top: 50%;
                left: 50%;
                transform-style: preserve-3d;
                animation: spin 2.5s linear infinite;
            }
            .back {
                background-image: url("/uploads/160101/backeuro.png");
                width: 150px;
                height: 150px;
                background: blue;
                border-radius: 50%;
            }
            .middle {
                background-image: url("/uploads/160101/faceeuro.png");
                width: 150px;
                height: 150px;
                transform: translateZ(1px);
                position: absolute;
                background: yellow;
                border-radius: 50%;
                top: 0;
            }
            .front {
                background-image: url("/uploads/160101/faceeuro.png");
                height: 150px;
                position: absolute;
                top: 0;
                transform: translateZ(10px);
                width: 150px;
            }

            @keyframes spin {
                0% {
                    transform: rotateY(0deg);
                }
                100% {
                    transform: rotateY(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div id="euro">
            <div class="front" />
            <div class="middle" />
            <div class="back" />
        </div>
    </body>
</html>

效果如下：

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 js+css3实现旋转效果纯css实现盒子3d旋转效果 CSS3 3D效果实现一个可旋转的正方体利用css3渐变效果实现圆环旋转效果 2d旋转（css3实现过度效果和动画效果） VUE-CSS图片旋转-实现加载中动画效果 css3 div实现三维立体圆环旋转效果纯css3实现箭头、关闭按钮旋转效果 CSS3伪类实现动画旋转效果用css3实现摩天轮旋转的动画效果