正反两面的盒子内容切换旋转
<!doctype html>
<html ng-app="invoice2">
<head>
<style>
* {
padding: 0;
margin: 0;
}
ul,
li {
list-style: none;
}
.ul {
margin-top: 100px;
margin-left: 200px;
}
.back {
background: #fff;
width: 182px;
height: 81px;
transform: rotateY(180deg);
transition: all 1s;
text-align: center;
opacity: 0;
margin-top: -103px;
margin-bottom: 22px;
box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.17);
}
.company-logo-box{
width: 182px;
height: 81px;
display: inline-block;
}
.company-logo-box:hover .front {
opacity: 0;
transform: rotateY(180deg);
transition: all 1s;
}
.company-logo-box:hover .back {
opacity: 1;
z-index: 2;
transform: rotateY(360deg);
transition: all 1s;
}
.back span {
display: inline-block;
line-height: 81px;
font-size: 20px;
width: 162px;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
}
.logo-box {
background: #fff;
width: 182px;
height: 81px;
margin-bottom: 22px;
box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.17);
transform: rotateY(0deg);
transition: all 1s;
}
.logo-box img {
width: 100%;
}
</style>
</head>
<body>
<ul class="ul">
<li class="company-logo-box">
<div class="front logo-box">
<div class="box">
<img src="./logo/ANNU.jpg" />
</div>
</div>
<div class="back">
<span>8船期</span>
</div>
</li>
<li class="company-logo-box">
<div class="front logo-box">
<div class="box">
<img src="./logo/APLU.jpg" />
</div>
</div>
<div class="back">
<span>88船期</span>
</div>
</li>
<li class="company-logo-box">
<div class="front logo-box">
<div class="box">
<img src="./logo/ASLE.jpg" />
</div>
</div>
<div class="back">
<span>888船期</span>
</div>
</li>
<li class="company-logo-box">
<div class="front logo-box">
<div class="box">
<img src="./logo/CMDU.jpg" />
</div>
</div>
<div class="back">
<span>8888船期</span>
</div>
</li>
</ul>
<script>
</script>
</body>
</html>