您好,游客注册登录繁體
首页 >> css3 >> 点击旋转翻页特效

点击旋转翻页特效

Tyna 2015-12-21 0
浏览次数2466

 
点击旋转翻页,适用于移动端、webapp、ipad、和pc端上的旋转翻页效果。
 
点击旋转翻页
 
这是我在写一个ipad端的项目时候写的,想着或许以后会用到或者哪位朋友可能会用到就把它记录下来了,这是一款css3写的很少代码的旋转翻页特效,上面是翻转的预览图,需要的同学可直接使用-Tyna。
 
代码如下:
 
点击旋转翻页特效html代码:
 

<body>
<div class="flip-container" id="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!--旋转翻页前面内容 -->
</div>
<div class="back">
<!--旋转翻页背面内容 -->
</div>
</div>
</div>
<button id="button">点击翻转</button>
</body>

 

 
点击旋转翻页特效css代码:
 

.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
border: 1px solid #ccc;
}
/*
.flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
filter: FlipH;
-ms-filter: "FlipH";
}
*/
/* START: Accommodating for IE */
.flip-container.hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container.hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* END: Accommodating for IE */
.flip-container,
.front,
.back {
width: 320px;
height: 427px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.6s;
-moz-transition: 0.6s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
background: lightgreen;
z-index: 2;
}
.back {
background: lightblue;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.front .name {
font-size: 2em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 60px;
left: 25%;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.back-logo {
position: absolute;
top: 40px;
left: 90px;
width: 160px;
height: 117px;
background: url(/wordpress/wp-content/uploads/2014/03/hack-logo.jpg) 0 0 no-repeat;
}
.back-title {
font-weight: bold;
color: #00304a;
position: absolute;
top: 180px;
left: 0;
right: 0;
text-align: center;
text-shadow: 0.1em 0.1em 0.05em #acd7e5;
font-family: Courier;
font-size: 2em;
}
.back p {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
padding: 0 20px;
}

 


 
点击旋转翻页特效js代码:
 

window.onload = function(){
var content = $('#flip-container');
$('#button').click(function(){
if(content.hasClass('hover')){
content.removeClass('hover');
}else{
content.addClass('hover');
}
})
}

 
 

全部评论:0

需要登录才能发表评论!

需要 登录 才能发表评论

<