随笔- 1793 文章- 1 评论- 61 阅读- 298万

css3动画

旋转3d 相册

<html>
<head>
<meta charset="UTF-8"/>
<title>3d旋转电子相册</title>
<style>
    *{margin: 0; padding: 0;}
    body, html{height: 100%;}
    body{
        background: url(images/bg2.jpg) no-repeat
    }
    #wrap {
        width: 280px;
        height: 400px;
        border: 1px solid #fff;
        position:fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        transform-style: preserve-3d;
        transform: rotateX(0deg) rotateY(0deg);
        animation: go 45s linear infinite ;
    }
    #wrap img{
        width:  280px;
        height: 400px;
        position: absolute ;
        left: 0;
        top:0;
    }
    #wrap img:nth-child(1){
        transform: rotateY(0deg) translateZ(650px);
    }
 
    #wrap img:nth-child(2){
        transform: rotateY(36deg) translateZ(650px);
    }
 
 
    #wrap img:nth-child(3){
        transform: rotateY(72deg) translateZ(650px);
    }
    #wrap img:nth-child(4){
        transform: rotateY(108deg) translateZ(650px);
    }
 
    #wrap img:nth-child(5){
        transform: rotateY(144deg) translateZ(650px);
    }
 
    #wrap img:nth-child(6){
        transform: rotateY(180deg) translateZ(650px);
    }
 
    #wrap img:nth-child(7){
        transform: rotateY(216deg) translateZ(650px);
    }
 
    #wrap img:nth-child(8){
        transform: rotateY(252deg) translateZ(650px);
    }
 
    #wrap img:nth-child(9){
        transform: rotateY(288deg) translateZ(650px);
    }
 
    #wrap img:nth-child(10){
        transform: rotateY(324deg) translateZ(650px);
    }
 
 
    @keyframes go{
        0%{transform: rotateX(0deg) rotateY(0deg)}
        25%{transform: rotateX(20deg) rotateY(180deg)}
        50%{transform: rotateX(0deg) rotateY(360deg)}
        75%{transform: rotateX(-20deg) rotateY(540deg)}
        100%{transform: rotateX(0deg) rotateY(720deg)}
    }
</style>
</head>
<body>
    <div id="wrap">
        <img src="images/1.jpg"/> 
        <img src="images/2.jpg"/> 
        <img src="images/3.jpg"/> 
        <img src="images/4.jpg"/> 
        <img src="images/5.jpg"/> 
        <img src="images/6.jpg"/> 
        <img src="images/7.jpg"/> 
        <img src="images/8.jpg"/> 
        <img src="images/9.jpg"/> 
    </div>
    <audio src="audio/xx.mp3" autoplay loop></audio>
    <img src="images/xx.jif" class="left_bottom"/>
</body>
</html>