立体折叠相册效果

栏目: Html · 发布时间: 6年前

核心属性

perspective + transform-style 图片的立体翻转效果

transform + transform-origin + transition-delay 图片逐个展开或折叠的效果

  1. <base href="https://pics.codecolor.cn/origami-gallery-effect/">
  2. <div id="emma">
  3. <div id="contain">
  4. <img src="emma-center.jpg" alt>
  5. <img id="top" src="emma-top.jpg" alt>
  6. <img id="left" src="emma-left.jpg" alt>
  7. <img id="bottom" src="emma-bottom.jpg" alt>
  8. <img id="right" src="emma-right.jpg" alt>
  9. </div>
  10. </div>
  1. div#emma {
  2. position: relative;
  3. width: 15%;
  4. margin: 0 auto;
  5. top: 18em;
  6. perspective: 1000px;
  7. }
  8. div#contain{
  9. transform-style: preserve-3d;
  10. }
  11. div#emma img {
  12. position: absolute;
  13. max-width: 100%;
  14. outline: 1px solid transparent;
  15. transform: rotate3d(0, 0, 0, 0deg);
  16. filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 1));
  17. transition-duration: 2s;
  18. }
  19. div#emma img#right {
  20. transform-origin: top right;
  21. transition-delay: 3s;
  22. }
  23. div#emma:hover img#right {
  24. transform: rotate3d(0, 1, 0, 180deg);
  25. transition-delay: 0s;
  26. }
  27. div#emma img#bottom {
  28. transform-origin: center bottom;
  29. transition-delay: 2.5s;
  30. }
  31. div#emma:hover img#bottom {
  32. transform: rotate3d(1, 0, 0, -178deg);
  33. transition-delay: .5s;
  34. }
  35. div#emma img#left {
  36. transform-origin: left top;
  37. transition-delay: 2s;
  38. }
  39. div#emma:hover img#left {
  40. transform: rotate3d(0, 1, 0, -178deg);
  41. transition-delay: 1s;
  42. }
  43. div#emma img#top {
  44. transform-origin: top center;
  45. transition-delay: 1.5s;
  46. }
  47. div#emma:hover img#top {
  48. transform: rotate3d(1, 0, 0, 179deg);
  49. transition-delay: 1.5s;
  50. }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

期货趋势程序化交易方法

期货趋势程序化交易方法

马文胜 编 / 中国财政经济 / 2008-1 / 42.00元

《期货趋势程序化交易方法》可作为学习期货行业的教程。中国期货行业非常重视期货人才队伍的建设,无论是在抓紧推进期货分析师的认证体系建设、提升期货分析师的执业水平上,还是在专业人才的后续教育上。 要想在期货市场上长期生存并保持稳定的获利,必须在充分认识市场的基础上,建立一个有效的系统化的手段和程序化的方法,把一切的复杂性和不确定性全部加以量化,使所有的交易有序而直观,才能最终达到低风险、低回报。一起来看看 《期货趋势程序化交易方法》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

在线进制转换器
在线进制转换器

各进制数互转换器

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具