核心属性
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;
-
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- AI制作3d立体字
- Android 可折叠TextView
- [译] Python 优化机制:常量折叠
- Antv关于G6树状图实现折叠
- 立体字母建模教程【C4D教程】
- ElementUI Collapse折叠面板更改展开icon位置
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。