简单的3D小球旋转效果 

   
    <style>
        .out{
            margin: 200px;
            transform-style: preserve-3d;
            animation: all 3s linear infinite;
            transform-origin: 100px;
        }
        .out>div{
            background: radial-gradient(transparent 30%,rgba(0,0,0,0.3) 100%);
            height: 200px;
            width: 200px;
            border-radius: 50%;
            position: absolute;
        }
        .d1{
            transform: rotateY(0deg);
        }
         .d2{
             transform: rotateY(120deg);
         }
         .d3{
             transform: rotateY(240deg);
         }
        @keyframes all {
            0%{
                transform: rotateY(0deg);
            }
            100%{
                transform: rotateY(360deg);
            }

        }

    </style>
</head>
<body>
<div class="out">
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</div>
</body>
</html>
posted @ 2017-03-23 11:40  豆豆豆芽儿  阅读(284)  评论(0)    收藏  举报