css3硬币在桌面上旋转 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .wrapper{
            position: relative;
            width:400px;
            height:400px;
            perspective: 600px;
        }
        .item{
            transform-style: preserve-3d;
            width:200px;
            height:200px;
            position: absolute;
            top:100px;
            left:190px;
            animation: move 1s linear infinite;
           
        }
        .font, .back{
            position: absolute;
            top:0;
            left:0;
            border-radius:50%;
            width:100%;
            height:100%;
            background-size:cover;
            background-position:center;
            
        }
        .font{
            transform: translateZ(1px);
            background-image:url('./5.jpg'); 
            backface-visibility: hidden;
            
        }
        .back{
            background-image:url('./4.jpg');
            transform:rotateY(180deg) translateZ(-1px);
            backface-visibility: hidden;
            
        }
        .plane{
            position: absolute;
            top:100px;
            left:100px;
            width: 400px;
            height: 200px;
            background-color: burlywood;
            transform: rotateX(91deg) translateZ(-115px);
        }
        .planeInner{
            position: absolute;
            top:100px;
            left:100px;
            width: 400px;
            height: 200px;
            background-color: burlywood;
            transform: rotateX(91deg) translateY(-200px) translateZ(-115px);
        }
        .one{
            width: 20px;
            height: 120px;
            position: absolute;
            background-color: burlywood;
            top: 336px;
            left: 100px;
            transform: rotateY(70deg);
        }
        .one2{
            width: 20px;
            height: 120px;
            position: absolute;
            background-color: burlywood;
            top: 336px;
            left: 100px;
            transform: rotateY(70deg) translateZ(-12px);
        }
        .one3{
            width: 5px;
            height: 120px;
            position: absolute;
            background-color: lawngreen;
            top: 336px;
            left: 100px;
            transform:translateZ(8px);
        }
        .two{
            width: 20px;
            height: 120px;
            position: absolute;
            background-color: burlywood;
            top: 336px;
            left: 519px;
            transform: rotateY(75deg);            
        }
        .two2{
            width: 20px;
            height: 120px;
            position: absolute;
            background-color: burlywood;
            top: 336px;
            left: 520px;
            transform: rotateY(85deg) translateZ(-12px);
        }
        .two3{
            width: 5px;
            height: 120px;
            position: absolute;
            background-color: lawngreen;
            top: 335px;
            left: 519px;
            transform:translateZ(8px);            
        }
        
        @keyframes move{
            to{
                transform: rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="planeInner"></div>
        <div class="item">
            <div class="font"></div>
            <div class="back"></div>
        </div>
        <div class="plane"></div>
        <div class="one"></div>
        <div class="one2"></div>
        <div class="one3"></div>
        <div class="two"></div>
        <div class="two2"></div>
        <div class="two3"></div>
    </div>
</body>
</html>
posted @ 2018-04-11 21:23  FE-神鸟  阅读(298)  评论(0)    收藏  举报