问题描述:实现最开始是一张图片面向我们,一张图片面向下面,当鼠标移入时,两张图片同时沿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>