CSS3的多图片翻转切换是一种很酷炫的效果,能够让页面元素在不同角度展现出不同的图像。以下是一段CSS代码示例,可以实现这一效果。
.container { perspective: 1000px; } .card { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; transition: transform 1s; } .card:hover { transform: rotateY(180deg); } .card .front,.card .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .card .front { background-image: url('front-image.jpg'); } .card .back { background-image: url('back-image.jpg'); transform: rotateY(180deg); }
其中,container类是用于承载card元素的容器,设置了透视效果,实现了立体感。card类是需要翻转的元素,使用了transform样式实现翻转效果,并设置了翻转的过渡时间。card类中还有front和back两个子元素,分别设置了正反两面的背景图片,并使用了backface-visibility样式使得不可见面不可见,同时back元素使用了transform: rotateY(180deg)样式,使得元素在初始状态时呈现背面。当鼠标悬浮在card元素上时,card元素会自动翻转,呈现另一面的图片。