zoukankan      html  css  js  c++  java
  • 3D旋转相册(纯css)


    html代码:

    <div class="Exhibition">                    //放置的容器
      <div class="content">                     //旋转的目标
        <img class="img1" src="world.jpg"/>
        <img class="img2" src="world.jpg"/>
        <img class="img3" src="world.jpg"/>
        <img class="img4" src="world.jpg"/>
      </div>
    </div>

    css代码:

    .Exhibition{
      perspective: 500px;                                    //让容器有个“坑”可以展示物品
      transform: rotateX(0deg);                              //这里可以展示看的位置!(可以没有)  
    }
    .content{
      margin-left: 600px;
      margin-top: 200px;
      width: 200px;
      height: 200px;
      transform-style: preserve-3d;                          //让里面的元素3d展示
      -webkit-animation:ab 10s infinite linear  ;       //动画/线性无限循环
      -moz-animation:ab 10s infinite linear ;
      animation:ab 10s infinite linear ;
      position: relative;
    }

    img{ position: absolute; height: 200px; } .img1{ -webkit-transform:rotateY(0deg) translateZ(150px) ; //倾斜0deg,并向图片的前方拉近150px -moz-transform:rotateY(0deg) translateZ(150px) ;                       -ms-transform:rotateY(0deg) translateZ(150px) ; transform:rotateY(0deg) translateZ(150px); } .img2{ -webkit-transform:rotateY(90deg) translateZ(150px) ;          //倾斜90deg,并向图片前拉近150px -moz-transform:rotateY(90deg) translateZ(150px) ; -ms-transform:rotateY(90deg) translateZ(150px) ; transform:rotateY(90deg) translateZ(150px);
    } .img3{ -webkit-transform:rotateY(180deg) translateZ(150px) ; -moz-transform:rotateY(180deg) translateZ(150px) ; -ms-transform:rotateY(180deg) translateZ(150px) ; transform:rotateY(180deg) translateZ(150px); } .img4{ -webkit-transform:rotateY(270deg) translateZ(150px) ; -moz-transform:rotateY(270deg) translateZ(150px) ; -ms-transform:rotateY(270deg) translateZ(150px) ; transform:rotateY(270deg) translateZ(150px); } @keyframes demo{ from{transform: rotateY(0deg)} to{transform: rotateY(360deg)} } 

    已上是个人网上看别人的成果,解析出来的,不是很规范,希望有大神给小白留下更标准的解释,谢谢!

  • 相关阅读:
    Codeforces Round #172 (Div. 2) B. Nearest Fraction
    什么是DWR
    1310 N皇后问题
    ural Bus Routes(dfs深搜)
    ural Russian Pipelines(最短路)
    ural Graph Decomposition
    ural Network ( 最小生成树)
    poj 1579 Function Run Fun ( 记忆化搜索 )
    计算某一天的前一天的日期
    DataStructGraphpart1
  • 原文地址:https://www.cnblogs.com/ash-sky/p/9582912.html
Copyright © 2011-2022 走看看