92 lines
1.9 KiB
CSS
92 lines
1.9 KiB
CSS
|
|
|||
|
|
* {
|
|||
|
|
/* 清除默认样式 */
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
body {
|
|||
|
|
/* 定义变量 */
|
|||
|
|
--img-width: 5.625rem;
|
|||
|
|
--img-height: 100vh;
|
|||
|
|
}
|
|||
|
|
.container {
|
|||
|
|
/* 设为flex容器 */
|
|||
|
|
display: flex;
|
|||
|
|
/* 设置子元素水平居中 */
|
|||
|
|
justify-content: center;
|
|||
|
|
/* 设置子元素垂直居中 */
|
|||
|
|
align-items: center;
|
|||
|
|
/* 设置容器宽高为整个可视区的宽高 */
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 100vh;
|
|||
|
|
background-color: #eeffff;
|
|||
|
|
}
|
|||
|
|
.grid-container {
|
|||
|
|
position: relative;
|
|||
|
|
/* 设为grid容器 */
|
|||
|
|
display: grid;
|
|||
|
|
/* 设置为4列，列宽为200px（图片宽度） */
|
|||
|
|
grid-template-columns: repeat(4, var(--img-width));
|
|||
|
|
/* 设为两行，行高为270px（图片高度） */
|
|||
|
|
grid-template-rows: repeat(1, var(--img-height));
|
|||
|
|
/* 设置行列间距为20px */
|
|||
|
|
gap: 0.3125rem;
|
|||
|
|
|
|||
|
|
/* 设置观测距离 Z=0 平面*/
|
|||
|
|
perspective: 1600px;
|
|||
|
|
/* 设置观测位置 */
|
|||
|
|
perspective-origin: 50% 50%;
|
|||
|
|
}
|
|||
|
|
.grid-item {
|
|||
|
|
position: relative;
|
|||
|
|
transition: transform 2s ease-in-out;
|
|||
|
|
transform-style: preserve-3d;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 可以为每个 item 设置不同延迟 */
|
|||
|
|
.grid-item:nth-child(1) {
|
|||
|
|
transition-delay: 0s;
|
|||
|
|
}
|
|||
|
|
.grid-item:nth-child(2) {
|
|||
|
|
transition-delay: 0.2s;
|
|||
|
|
}
|
|||
|
|
.grid-item:nth-child(3) {
|
|||
|
|
transition-delay: 0.4s;
|
|||
|
|
}
|
|||
|
|
.grid-item:nth-child(4) {
|
|||
|
|
transition-delay: 0.6s;
|
|||
|
|
}
|
|||
|
|
.grid-item.flipped {
|
|||
|
|
transform: rotateY(180deg);
|
|||
|
|
}
|
|||
|
|
.grid-item:hover {
|
|||
|
|
/* 沿Y轴旋转180° */
|
|||
|
|
transform: rotateY(180deg);
|
|||
|
|
}
|
|||
|
|
.img-front,
|
|||
|
|
.img-back {
|
|||
|
|
/* 设为绝对定位 */
|
|||
|
|
position: absolute;
|
|||
|
|
/* 距离父元素上边距和左边距均为0 */
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
/* 图片的默认大小（父盒子的宽高） */
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
border-radius: 6px;
|
|||
|
|
box-shadow: 0 0 6px 1px #666;
|
|||
|
|
|
|||
|
|
/* 设置图片背面不可见 */
|
|||
|
|
-webkit-backface-visibility: hidden;
|
|||
|
|
backface-visibility: hidden;
|
|||
|
|
}
|
|||
|
|
.img-front {
|
|||
|
|
/* 提高堆叠顺序 */
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
.img-back {
|
|||
|
|
/* 卡片反面图默认背面朝向观察者 */
|
|||
|
|
transform: rotateY(-180deg);
|
|||
|
|
}
|