CSS图片上下翻转动画是一种常见的网页动画效果,可以提高网页的视觉吸引力。下面介绍一种简单的CSS实现方式。
.flip-card { background-color: transparent; border: none; perspective: 1000px; /* 设置透视度 */ } .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; /* 设置动画时间 */ transform-style: preserve-3d; /* 设置3D转换 */ } .flip-card:hover .flip-card-inner { transform: rotateX(180deg); /* 鼠标悬停时触发翻转效果 */ } .flip-card-front,.flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* 隐藏反面 */ backface-visibility: hidden; } .flip-card-front { background-color: #bbb; color: black; } .flip-card-back { background-color: #2980b9; color: white; transform: rotateX(180deg); /* 初始状态将背面翻转 */ }
上述代码中,通过设置透视度和3D转换实现了图片立体翻转的效果。其中,.flip-card是外层容器,.flip-card-inner是实现翻转动画的内层容器。
在翻转效果中,.flip-card-front是图片的正面,.flip-card-back是图片的反面。通过设置transition属性和transform属性,实现了图片上下翻转的动画效果。
通过简单的CSS代码,实现了图片上下翻转的动画效果,能够提高网页的视觉体验。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。