web实现翻转效果

棋宣

已于 2022-03-26 22:27:06 修改

阅读量498

点赞数

文章标签： css sass html css3

于 2022-03-23 00:18:07 首次发布

本文链接：https://blog.csdn.net/flower521528/article/details/123675075

版权

今天作业太多了，写不完，网课效果太不好，害。

今天实现一个翻转效果，实现翻转的两面是两个内容

<style>
			.box{
				width:500px;
				height:500px;
				margin:0 auto;
			}
			.box .one{
				width:291px;
				height:251px;
				position: relative;
			}
			.box .one .tone{
				position: absolute;
				transform: rotateX(0deg);
				backface-visibility: hidden;
				transition: 1s;
				perspective: 1000px;
			}
			.box .one .ttwo{
				position: absolute;
				transform: rotateX(-180deg);
				backface-visibility: hidden;
				transition: 1s;
				perspective: 1000px;
			}
			.box .one:hover .tone{
				transform: rotateX(-180deg);
			}
			.box .one:hover .ttwo{
				transform: rotateX(0deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="one">
				<img class="tone" src="images/try1.jpg" alt="">
				<img class="ttwo "src="images/try2.jpg" alt="">
			</div>
			<div class="two">
				
			</div>
		</div>
	</body>

运行截图：

实现的就是这个效果；