立体折叠相册效果

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

核心属性

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

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

<base href="https://pics.codecolor.cn/origami-gallery-effect/">

```
<div id="emma">
```
```
<div id="contain">
```
```
<img src="emma-center.jpg" alt>
```
```
<img id="top" src="emma-top.jpg" alt>
```
```
<img id="left" src="emma-left.jpg" alt>
```

<img id="bottom" src="emma-bottom.jpg" alt>

<img id="right" src="emma-right.jpg" alt>

```
</div>
```
```
</div>
```

```
div#emma {
```
```
position: relative;
```
```
width: 15%;
```
```
margin: 0 auto;
```
```
top: 18em;
```
```
perspective: 1000px;
```
```
}
```
```
div#contain{
```
```
transform-style: preserve-3d;
```
```
}
```
```
div#emma img {
```
```
position: absolute;
```
```
max-width: 100%;
```
```
outline: 1px solid transparent;
```
```
transform: rotate3d(0, 0, 0, 0deg);
```

filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 1));

```
transition-duration: 2s;
```
```
}
```
```
div#emma img#right {
```
```
transform-origin: top right;
```
```
transition-delay: 3s;
```
```
}
```
```
div#emma:hover img#right {
```
```
transform: rotate3d(0, 1, 0, 180deg);
```
```
transition-delay: 0s;
```
```
}
```
```
div#emma img#bottom {
```
```
transform-origin: center bottom;
```
```
transition-delay: 2.5s;
```
```
}
```
```
div#emma:hover img#bottom {
```
```
transform: rotate3d(1, 0, 0, -178deg);
```
```
transition-delay: .5s;
```
```
}
```
```
div#emma img#left {
```
```
transform-origin: left top;
```
```
transition-delay: 2s;
```
```
}
```
```
div#emma:hover img#left {
```
```
transform: rotate3d(0, 1, 0, -178deg);
```
```
transition-delay: 1s;
```
```
}
```
```
div#emma img#top {
```
```
transform-origin: top center;
```
```
transition-delay: 1.5s;
```
```
}
```
```
div#emma:hover img#top {
```
```
transform: rotate3d(1, 0, 0, 179deg);
```
```
transition-delay: 1.5s;
```
```
}
```

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

查看所有标签

猜你喜欢:

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

码农书籍

Java核心技术·卷 I（原书第10版）

[美] 凯.S.霍斯特曼（Cay S. Horstmann） / 周立新等 / 机械工业出版社 / 2016-9 / CNY 119.00

Java领域最有影响力和价值的著作之一，由拥有20多年教学与研究经验的资深Java技术专家撰写(获Jolt大奖)，与《Java编程思想》齐名，10余年全球畅销不衰，广受好评。第10版根据Java SE 8全面更新，同时修正了第9版中的不足，系统全面讲解了Java语言的核心概念、语法、重要特性和开发方法，包含大量案例，实践性强。一直以来，《Java核心技术》都被认为是面向高级程序员的经典教......一起来看看《Java核心技术·卷 I（原书第10版）》这本书的介绍吧!

码农工具

JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析

在线 JSON 格式化工具