思路
外部盒子包两个盒子
外部盒子绝对定位,内部两盒子相对定位
外部盒子hover触发内部盒子的变形
内部盒子变形的具体调整
完整代码<style>
.outter{
border: 2px solid black;
position:relative;
width: 800px;
height: 300px;
}
.outter div{
width: 300px;
height: 300px;
}
.pic{
background-color: #a1a1a1;
position:absolute;
left:0px;
top:0px;
transform:perspective(800px) rotateY(0deg);
backface-visibility: hidden;
transition:all 1s linear;
}
.outter:hover .pic{
transform:perspective(800px) rotateY(180deg);
}
.txt{
background-color: #ff5cc9;
position: absolute;
left:0px;
top:0px;
transform:perspective(800px) rotateY(-180deg);
backface-visibility: hidden;
transition:all 1s linear; }
.outter:hover .txt{
transform:perspective(800px) rotateY(0deg);
}
</style>
<div class="outter">
<div class="pic"></div>
<div class="txt"><h1>i am content</h1></div>
</div>