立体折叠相册效果

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

核心属性

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;
```
```
}
```

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

查看所有标签

猜你喜欢:

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

码农书籍

Head First Python

Paul Barry / O'Reilly Media / 2010-11-30 / USD 49.99

Are you keen to add Python to your programming skills? Learn quickly and have some fun at the same time with Head First Python. This book takes you beyond typical how-to manuals with engaging images, ......一起来看看《Head First Python》这本书的介绍吧!

码农工具

图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器

多种字符组合密码

XML 在线格式化

在线 XML 格式化压缩工具