如何使用 CSS 创建翻转卡片 |
您所在的位置:网站首页 › css反转动画 › 如何使用 CSS 创建翻转卡片 |
/* 翻转卡片容器 - 将宽度和高度设置为您想要的任何值。 我们添加了边框属性来演示翻转本身在悬停时会脱离盒子(如果您不想要 3D 效果,请删除透视 */
.flip-card { background-color: transparent; width: 300px;
height: 200px; border: 1px solid #f1f1f1; perspective: 1000px;
/* 如果您不想要 3D 效果,请删除它 */
} /* 需要这个容器来定位正反面 */ .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d;} /* 将鼠标移到翻转框容器上时进行水平翻转 */ .flip-card:hover .flip-card-inner { transform: rotateY(180deg);} /* 定位正面和背面 */ .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden;} /* 设置正面的样式(如果图像丢失则回退)*/ .flip-card-front { background-color: #bbb; color: black;} /* 为背面设置样式 */ .flip-card-back { background-color: dodgerblue; color: white; transform: rotateY(180deg);} |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |