Css实现翻书效果

2019-09-10 郑州网站建设  

怎么实现翻书效果在一些小说站中经常应用,其实实现起来也很简单,下面是用div+css

实现翻书效果。

<!DOCTYPE html>

<html>

         <head>

                   <meta charset="utf-8" />

                   <title></title>

                   <style>

                            body{

                                     overflow: hidden;

                                     margin: 0;

                                     padding: 0;

                            }

                            #book{

                                     position: absolute;

                                     left: 50%;

                                     top: 50%;

                                     margin-left: -325px;

                                     margin-top: -300px;

                                     height: 600px;

                                     width: 750px;

                                     transform-style: preserve-3d;

                                     transform:perspective(1000px) rotateX(60deg) rotateY(0deg);

                                     transition: 1s;

                            }


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1792.html转载请标明出处,谢谢合作!
标签:
  • css
  • 小说
  • Ч
  • 实现
  • 一些
  • 如何
  • 效果