css3的书翻页技术

一直都太懒了，今天写一篇来歌颂我们伟大的CSS3技术，利用了CSS3中的3D属性来表示翻页技术代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body,html {
            height: 100%;
        }
        body {
            /*perspective 属性指定了观察者与z=0平面的距离，
使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。*/
            -webkit-perspective: 1000px;
            -moz-perspective: 1000px;
            -ms-perspective: 1000px;
            perspective: 3000px;
            background-color: #212121;
            font-family: '微软雅黑';
        }

        .preserve-3d {
            /*transform-style属性指定了，
  该元素的子元素是（看起来）位于三维空间内，
  还是在该元素所在的平面内被扁平化。*/
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .container div{
            width: 200px;
            height: 200px;
            /*background-color: red;*/
            position: absolute;
            top:0;
            left:0;
            outline:1px solid transparent;
            /*outline:1px solid transparent;上诉图片 蓝色的
 设置了起始旋转30度，火狐下明显有锯齿
   。  别的浏览器没有很仔细的观察，
     这是加个属性  outline:1px solid transparent;

<div class="front " 
style="outline:1px solid transparent;background:blue; color:#fff; 
-moz-transform: rotateY(30deg);overflow:hidden;">前面 
针对火狐 outline:1px solid transparent用于消除锯齿</div>
*/
            border: 1px solid #ccc;
            border-left:5px solid white;
            border-radius: 10px;
            transform-origin: left;
            transition: all linear 5s;
        }
        .container div:nth-child(1){
            transform: rotateX(370deg);
            background-image: url("resource/img/102.jpg");
            background-repeat:no-repeat;
            background-size:contain;
            -webkit-background-size:100% 100%;

        }
        .container div:nth-child(2){
            transform: rotateX(370deg) rotateY(-2deg); ;
            background-image: url("resource/img/17.jpeg");
            background-repeat:no-repeat;
            background-size:contain;
            -webkit-background-size:100% 100%;

        }
        .container div:nth-child(3){
            transform: rotateX(370deg) rotateY(-2deg);;
            background-image: url("resource/img/20.jpeg");
            background-repeat:no-repeat;
            background-size:contain;-webkit-background-size:100% 100%;

        }
        .container div:nth-child(4){
            transform: rotateX(370deg) rotateY(-2deg);
            background-image: url("resource/img/21.jpeg");
            background-repeat:no-repeat;
            /*background-size:contain*/
            -webkit-background-size:100% 100%;

        }
        .container div:nth-child(5){
            transform: rotateX(370deg) rotateY(-2deg); ;
            background-image: url("resource/img/12.jpeg");
            background-repeat:no-repeat;
            background-size:contain;
            -webkit-background-size:100% 100%;
           }
        .container{
            position: relative;
            margin:20%;
            left:20%;
            top:20%;
        }
        .container:hover div:nth-child(1){
            transform: rotateX(370deg) ;
            border-left:5px double whitesmoke;
            /*border-radius: 29px 5px 5px 29px;*/
        }
        .container:hover div:nth-child(2){
            transform: rotateX(370deg)  rotateY(-180deg);
            transition-delay: 6s;
            border-left:5px double whitesmoke;
            z-index: 3;
            width: 204px;
            /*border-radius: 29px 5px 5px 29px;*/
        }
        .container:hover div:nth-child(3){
            transform: rotateX(370deg)  rotateY(-180deg);
            transition-delay: 4s;
            border-left:5px double whitesmoke;
            z-index: 2;
            width: 205px;
            /*border-radius: 29px 5px 5px 29px;*/
        }
        .container:hover div:nth-child(4){
            transform: rotateX(370deg)  rotateY(-180deg);
            transition-delay: 2s;
            z-index: 1;
            width: 206px;
            border-left:5px double whitesmoke;
            /*border-radius:29px 5px 5px 29px;*/
        }
        .container:hover div:nth-child(5){
            transform: rotateX(370deg)  rotateY(-180deg);
            z-index: 0;
            /*border-radius: 29px 5px 5px 29px;*/
            width: 207px;
            border-left:5px double whitesmoke;
        }
        .container:hover div:nth-child(6){
            transform: rotateX(370deg)  rotateY(-180deg);
            z-index: -1;


        }
        @keyframes   change{

        }
    </style>
</head>
<body>
<div class="container preserve-3d" style="width: 80%;margin:20% 10%">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

</div>
</body>
</html>
猜你喜欢
