<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转</title>
    <style type="text/css">
        @keyframes spin3 {
            0% {
                transform: rotateY(70deg) rotateX(-30deg) rotateZ(0deg);
            }
            50% {
                transform: rotateY(70deg) rotateX(-30deg) rotateZ(180deg);
            }
            100% {
                transform: rotateY(70deg) rotateX(-30deg) rotateZ(360deg);
            }
        }
        @keyframes colorize {
            50% {
                border-color: magenta;
            }
        }
        #container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            width: 100%;
        }
        .circle {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            width: 100%;
        }
        .circle {
            position: absolute;
            height: 12rem;
            width: 12rem;
            border-radius: 6rem;
            border: .6rem solid cyan;
        }
        .circle:nth-child(1) {
            transform: rotateX(70deg);
            animation: spin1 1s linear infinite, colorize 1.2s linear infinite;
        }
        .circle:nth-child(2) {
            transform: rotateY(70deg) rotateX(30deg);
            animation: spin2 1.2s linear infinite, colorize 1.2s .4s linear infinite;
        }
        .circle:nth-child(3) {
            transform: rotateY(70deg) rotateX(-30deg);
            animation: spin3 .8s linear reverse infinite, colorize 1.2s .8s linear infinite;
        }
        .circle:before, .circle:after {
            content: '';
            position: absolute;
            height: 2rem;
            width: 1.5rem;
            border-radius: 50%;
            background: deepskyblue;
            transform: rotateZ(90deg);
        }
        .circle:before {
            margin: -4rem;
        }
        .circle:after {
            background-color: magenta;
        }
        @keyframes spin1 {
            0% {
                transform: rotateX(70deg) rotateZ(0deg);
            }
            50% {
                transform: rotateX(70deg) rotateZ(180deg);
            }
            100% {
                transform: rotateX(70deg) rotateZ(360deg);
            }
        }
        @keyframes spin2 {
            0% {
                transform: rotateY(70deg) rotateX(30deg) rotateZ(0deg);
            }
            50% {
                transform: rotateY(70deg) rotateX(30deg) rotateZ(180deg);
            }
            100% {
                transform: rotateY(70deg) rotateX(30deg) rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
    <div id="container" style="height: 225px;width: 288px;">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</body>
</html>