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)} } 

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

  • 相关阅读:
    Tomcat的startup.bat启动后显示乱码
    影响solr性能的一些因素(附使用经验)
    使用QQ传输大文件
    域名的接入备案和取消接入
    solr中Cache综述
    关于集群的一些概念
    RAMDISK 内存盘工具推荐
    实时监听input输入内容的N种方法
    jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等
    Vmware虚拟机三种网络模式详解
  • 原文地址:https://www.cnblogs.com/ash-sky/p/9582912.html
Copyright © 2011-2022 走看看