zoukankan      html  css  js  c++  java
  • 旋转木马图片——转转转!!

    今天做了一个小demo,内容是将几张图片做成像游乐园里的旋转木马一样,在网页上自动旋转,非常好玩!

    最终效果:

    不过,这是会旋转的呦!

    结构其实很简单,就是:

    一个舞台,一个容器,里面放上几张图片,其主要的工作量在css上:

    <style>
                #stage{
                    -webkit-perspective:800px;
                } 
             @keyframes rotateA{
                0%{-webkit-transform:rotatey(0deg) rotatex(0deg);}
                16%{-webkit-transform:rotatey(60deg) rotatex(0deg);}
                32%{-webkit-transform:rotatey(120deg) rotatex(0deg);}
                48%{-webkit-transform:rotatey(180deg) rotatex(0deg);}
                64%{-webkit-transform:rotatey(240deg) rotatex(0deg);}
                80%{-webkit-transform:rotatey(300deg) rotatex(0deg);}
                100%{-webkit-transform:rotatey(360deg) rotatex(0deg);}
          }
                .container{
                    width:800px;
                    height:400px;
                    /*border:1px solid red;*/
                    position:relative;
                    top:150px;
            left:300px;
    
                    -webkit-transform-style: preserve-3d;
                    -webkit-transition: -webkit-transform 1s;
                    -webkit-animation:rotateA 10s linear infinite;                
                }
                .container img{
                    width:100px;
                    height:100px;
                    
                    position:absolute;
                    top:150px;
            left:300px;
                  -webkit-transition: opacity 1s, -webkit-transform 1s;
                    
                }
            
                .container img:nth-child(1){
                         -webkit-transform:translateZ(200px);
                }
                .container img:nth-child(2){
                         -webkit-transform:rotateY(45deg) translateZ(200px);
                }
                .container img:nth-child(3){
                         -webkit-transform:rotateY(90deg) translateZ(200px);
                }
                .container img:nth-child(4){
                         -webkit-transform:rotateY(135deg) translateZ(200px);
                }
                .container img:nth-child(5){
                         -webkit-transform:rotateY(180deg) translateZ(200px);
                }
    
                .container img:nth-child(6){
                         -webkit-transform:rotateY(225deg) translateZ(200px);
                }
                .container img:nth-child(7){
                         -webkit-transform:rotateY(270deg) translateZ(200px);
                }
    
                .container img:nth-child(8){
                         -webkit-transform:rotateY(315deg) translateZ(200px);
                }
                /*calc(30deg + 45deg*/
            </style>

    先给舞台设置一个透视点,然后该透视点为中心,利用transform的角度旋转rotate属性函数,位移translate属性函数,将八张图片分布于舞台的八个方向,两两间成45度角,最后利用css的animation动画技术,旋转容器container,就做出了图片的旋转木马特效。

  • 相关阅读:
    H5新增属性02
    h5新增属性
    javascript基础
    多列布局和弹性盒模型详解
    边框图片+盒子倒影
    CSS新增边框属性
    css3选择器
    css3基础
    h5新增-2
    h5新增
  • 原文地址:https://www.cnblogs.com/web-fusheng/p/6607672.html
Copyright © 2011-2022 走看看