用html5模拟书的翻页

//样式

.d3{
    transform-origin: 0% 0%;
    width: 60px;height: 80px;

    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    opacity: 0.5;
}
#book:hover > #book1{
    transform: rotateY(-180deg);
    transition-duration: 1.0s;

}
#book:hover> #book2{
    transform: rotateY(-170deg);
    transition-duration: 1.2s;
}
#book:hover> #book3{
    transform: rotateY(-160deg);
    transition-duration: 1.4s;
}
#book:hover> #book4{
    transform: rotateY(-150deg);
    transition-duration: 1.6s;
}
#book:hover> #book5{
    transform: rotateY(-140deg);
    transition-duration: 1.8s;
}

//定义六页纸
<div id="book" style="-webkit-transform-style: preserve-3d;margin-left: 100px;width: 70px;height: 80px">
     <div id="book1" class="d3" style="background-color: #167fc6; opacity: 1; z-index: 2"></div>
     <div id="book2" class="d3" style="background-color: white;top: -80px;width: 60px"></div>
     <div id="book3" class="d3" style="background-color: #c0392b;top: -160px;width: 62px"></div>
     <div id="book4" class="d3" style="background-color: black;top: -240px;width: 64px"></div>
     <div id="book5" class="d3" style="background-color: green;top: -320px;width: 66px"></div>
     <div id="book6" class="d3" style="background-color: yellow;top: -400px;width: 68px"></div>

</div>

转载于:https://www.cnblogs.com/lyf2458857555/p/6028321.html