css3 transform实现两张图片翻转动态效果

最新推荐文章于 2021-06-04 03:06:35 发布

Supreme_lwl

最新推荐文章于 2021-06-04 03:06:35 发布

阅读量3.5k

点赞数 1

分类专栏：前端 css

本文链接：https://blog.csdn.net/qq_42515626/article/details/104648258

版权

前端同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

问题描述：实现最开始是一张图片面向我们，一张图片面向下面，当鼠标移入时，两张图片同时沿X轴旋转90度。
实现原理：首先把两张图片的位置摆放好，即一张图片是初始状态不用管，另一张图片沿X轴旋转-90度，并且位于底部。当鼠标移入时，将他们的父盒子设置沿X旋转90度。
代码：

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.box{
			transform-style: preserve-3d;
			height: 200px;
			width: 200px;
			margin: 100px auto;
			position: relative;
			perspective: 10000px;

		}
		.box:hover {
			transform: rotateX(90deg);
			transform-origin: center; bottom 0; 
			transition: all 0.6s ease-in-out 0s;
		}
		.box:hover .img2{
			opacity: 1;
		}
		.img1{
			position: absolute;
		}
		.img2{
			position: absolute;
			transform: rotateX(-90deg);
			margin-top: 100%;
			opacity: 0;
			
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg" class="img1" />
		<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2568511504,2506144069&fm=26&gp=0.jpg" class="img2" />
	</div>
</body>
</html>

Supreme_lwl

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
css3 transform实现两张图片翻转动态效果

问题描述：实现最开始是一张图片面向我们，一张图片面向下面，当鼠标移入时，两张图片同时沿X轴旋转90度。实现原理：首先把两张图片的位置摆放好，即一张图片是初始状态不用管，另一张图片沿X轴旋转-90度，并且位于底部。当鼠标移入时，将他们的父盒子设置沿X旋转90度。代码：<!DOCTYPE html><!DOCTYPE html><html><hea...
复制链接

扫一扫

专栏目录