纯css实现翻转图

composed person

已于 2022-03-16 08:55:03 修改

阅读量1.2k

点赞数 4

于 2022-03-15 21:32:12 首次发布

本文链接：https://blog.csdn.net/m0_65878076/article/details/123512917

版权

CSS动画图片切换过渡效果 hover backface-visibility

关键词由CSDN通过智能技术生成

两张图片切换，这也是我们平时比较常见的技术，末班在这里，随拿随用，只需要把照片换一下就可以了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
            //最外层图片设置
			.box{
				width: 500px;
				perspective: 1000px;
				margin: 0 auto;
				position: relative;
			}
            //box 下面所有照片设置定位，背面不可见，把背面隐藏，
			.box img{
				position: absolute;
				top: 0;
				left: 0;
				backface-visibility: hidden;
			}
			//因为第二张图片反过来的时候是正的，所以提前先把后面翻转180度
			.box img:nth-of-type(2){
				transform: rotateX(-180deg);
			}
                //动画效果，2秒钟完成
			.box img{
				transition:all 2s;
			}
                //鼠标悬浮的时候第一张照片旋转180度，第二张照片回到0度
			.box:hover img:nth-of-type(1){
				transform: rotateX(180deg);
			}
	
			.box:hover img:nth-of-type(2){
				transform: rotateX(0deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="../day13-css动画/img/try3.jpg" >
			<img src="../day13-css动画/img/try4.jpg" >
		</div>
	</body>
</html>

composed person

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
纯css实现翻转图

两张图片切换，这也是我们平时比较常见的技术，末班在这里，随拿随用，只需要把照片换一下就可以了<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> //最外层图片设置 .box{ width: 500px; perspectiv
复制链接

扫一扫