用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刪除。

猜您在找 利用css3漸變效果實現圓環旋轉效果 VUE-CSS圖片旋轉-實現加載中動畫效果 CSS3 圓環旋轉效果 css3 旋轉效果加上雙面顯示效果使用css實現一個持續的動畫效果 css 實現字體旋轉 CSS3效果：旋轉的正方體解惑：如何使用html+css+js實現旋轉相冊，立方體相冊等動畫效果通過CSS3實現：鼠標懸停圖片360度旋轉效果 unity2d 實現物體跟隨鼠標繞一個點旋轉效果