틀:책 문서 원본 보기

{{#css:
.halvfjerde{{{1}}}book {
            width: 90%;
max-width: 350px;
            height:250px;
            border-radius: 20px;
            perspective: 600px;
            position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 30px;
line-height: {{{7|1.3}}}em;
        }

        .halvfjerde{{{1}}}5 {
padding: 12px;
padding-left: 15px; padding-right: 15px;
            position: absolute;
            z-index: 5;
            width: 50%;
            height: 100%;
            Left: 50%;
            background: linear-gradient(to right, #e1e1e1 0%, #f0f0f0 35%, #f0f0f0 65%, #e1e1e1 100%);
            border-radius: 0px 0 0 0px;
            transform-origin: center left;
            transform: rotateY(-20deg);
            transition: 1s ease all;
color:#333333;


        }

        .halvfjerde{{{1}}}book:hover > .halvfjerde{{{1}}}5 {
            transform: rotateY(-160deg);
z-index:4;
color:#333333;
transition: 0.7s ease all;
        }

.halvfjerde{{{1}}}6 {
padding: 12px;
padding-left: 15px; padding-right: 15px;
            position: absolute;
            z-index: 4;
            width: 50%;
            height: 100%;
            right: 50%;
            background: linear-gradient(to right, #e1e1e1 0%, #f0f0f0 35%, #f0f0f0 65%, #e1e1e1 100%);
            border-radius: 0px 0 0 0px;
            transform-origin: center right;
            transform: rotateY(160deg);
            transition: 0.7s ease all;


        }

.halvfjerde{{{1}}}book:hover > .halvfjerde{{{1}}}6 {
            transform: rotateY(20deg);
color:#333333;
transition: 1s ease all;
z-index:5;
        }

        .halvfjerde{{{1}}}book .halvfjerde{{{1}}} {
            position: absolute;
            width: 50%;
            top: 0;
            bottom: 0;
        }

        .halvfjerde{{{1}}}book .halvfjerde{{{1}}}.halvfjerde{{{1}}}1 {
            background: linear-gradient(to right, #e1e1e1 0%, #f0f0f0 35%, #f0f0f0 65%, #e1e1e1 100%);
            border-radius: 0px 0 0 0px;
            left: 0;
transform: rotateY(15deg);
transform-origin: center right;
border-right: #aaaaaa solid 1.5px;
color:#333333;

padding: 12px;
padding-left: 15px; padding-right: 15px;
        }
        
        .halvfjerde{{{1}}}book .halvfjerde{{{1}}}.halvfjerde{{{1}}}2 {
            background: linear-gradient(to right, #e1e1e1 0%, #f0f0f0 35%, #f0f0f0 65%, #e1e1e1 100%);
            right: 0;
            border-radius: 0 0px 0px 0;
transform: rotateY(-15deg);
transform-origin: center left;
border-left: #aaaaaa solid 1.5px;
color:#333333;

padding: 12px;
padding-left: 15px; padding-right: 15px;
        }

.halvfjerde{{{1}}}book .halvfjerde{{{1}}}.halvfjerde{{{1}}}3 {
padding: 12px;
padding-left: 15px; padding-right: 15px;
            position: absolute;
            z-index: -1;
            width: 53.5%;
margin-top:-0.65%;
            height: 102%;
            Left: 50%;
            background: {{{6|#449f79}}};
            border-radius: 0px 0 0 0px;
            transition: 1.4s ease all;


        }

.halvfjerde{{{1}}}book .halvfjerde{{{1}}}.halvfjerde{{{1}}}0 {
padding: 12px;
padding-left: 15px; padding-right: 15px;
            position: absolute;
            z-index: -1;
            width: 53.5%;
margin-top:-0.65%;
            height: 102%;
            right: 50%;
            background: {{{6|#449f79}}};
            border-radius: 0px 0 0 0px;
            transition: 1.4s ease all;


        }

#text5 {
opacity: 100%;
transition: 0.7s ease all;
color:#333333;
}

#text6 {
opacity: 0%;
transition: 0.5s ease all;
color:#333333;
}

.halvfjerde{{{1}}}book:hover #text5 {
opacity: 0%;
transition: 0.5s ease all;
color:#333333;
}

.halvfjerde{{{1}}}book:hover #text6 {
opacity: 100%;
transition: 0.7s ease all;
color:#333333;
}
}}<div class="halvfjerde{{{1}}}book">
<div class="halvfjerde{{{1}}} halvfjerde{{{1}}}0"></div>
            <div class="halvfjerde{{{1}}} halvfjerde{{{1}}}1">{{{2}}}</div >
<div class="halvfjerde{{{1}}} halvfjerde{{{1}}}5"><div id="text5">{{{3}}}</div></div>
<div class="halvfjerde{{{1}}} halvfjerde{{{1}}}6"><div id="text6">{{{4}}}</div></div>
            <div class="halvfjerde{{{1}}} halvfjerde{{{1}}}2">{{{5}}}</div>
<div class="halvfjerde{{{1}}} halvfjerde{{{1}}}3"></div>
        </div>