相册画廊
【相册画廊】代码来自头条号"前端小智", 侵权删
文章图片
Document - 锐客网 *{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
width: 1100px;
display: flex;
justify-content: space-between;
}
img{
width: 350px;
height: 350px;
transform-origin: center;
/*perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身*/
transform: perspective(800px) rotateY(20deg);
transition: .5s;
-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0004);
/*倒影*/
}
.container:hover img {
opacity: 0.1;
}.container img:hover{
transform:perspective(800px) rotateY(0deg);
opacity: 1;
}
文章图片
文章图片
文章图片
推荐阅读
- 宽容谁
- 我要做大厨
- 增长黑客的海盗法则
- 画画吗（）
- 2019-02-13——今天谈梦想（）
- 远去的风筝
- 三十年后的广场舞大爷
- 叙述作文
- 20190302|20190302 复盘翻盘
- 学无止境，人生还很长