web实现翻转效果

棋宣

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

阅读量457

点赞数

文章标签： 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>

运行截图：

实现的就是这个效果；

实现的关键是：backface-visibility:hidden 、背面不可见，也就是翻转不可见。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

棋宣

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
web实现翻转效果

今天作业太多了，写不完，网课效果太不好，害。今天实现一个翻转效果，实现翻转的两面是两个内容<style> .box{ width:500px; height:500px; margin:0 auto; } .box .one{ width:291px; height:251px; position: relative; } .box .one .tone{ position: absolute;
复制链接

扫一扫