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

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

  • 相关阅读:
    Python的扩展接口[1] -> 串口通信
    Python的扩展接口[0] -> VISA仪器控制
    Python的工具包[2] -> matplotlib图像绘制 -> matplotlib 库及使用总结
    Python的工具包[1] -> pandas数据预处理 -> pandas 库及使用总结
    Python的工具包[0] -> numpy科学计算 -> numpy 库及使用总结
    Python的Web编程[1] -> Web服务器[0] -> Web 服务器与 CGI / WSGI
    Python的Web编程[0] -> Web客户端[1] -> Web 页面解析
    Python的Web编程[0] -> Web客户端[0] -> 统一资源定位符 URL
    Python与正则表达式[0] -> re 模块的正则表达式匹配
    解决Wamp的 Error D:wamp or PHP path 错误
  • 原文地址:https://www.cnblogs.com/ash-sky/p/9582912.html
Copyright © 2011-2022 走看看