Untitled Application
Samsung Galaxy Tab 7
False
1024
600
False
False
False
WebApp
False
.container {
margin: 50px;
float: left;
width: 200px;
height: 200px;
perspective: 1000px;
user-select: none;
}
.box {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: translate3d(0, 0 -100px);
}
.face {
border: 1px solid #666;
cursor: default;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
outline: 1px solid transparent;
line-height: 200px;
text-align: center;
font-size: 30px;
}
.face.front {
background-color: #faa;
transform: translate3d(0, 0, 100px);
}
.face.back {
background-color: #aaf;
transform: translate3d(0, 0 -100px) rotateY(180deg);
}
.face.left {
background-color: #afa;
transform: rotateY(-90deg) translate3d(0, 0, 100px);
}
.face.right {
background-color: #aff;
transform: rotateY(90deg) translate3d(0, 0, 100px);
}
en
[AndroidOS,iOS,WindowsPhoneOS]
normal
True
True
False
True
True
False
False
True
False
False
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.hammerjs/2.0.0/jquery.hammer.js"></script>
BeginJS
var $containers = $('.container');
$containers.each(function() {
var $container = $(this),
$box = $container.find('.box'),
width = 0,
rotation = 0;
$container.hammer().on('panmove panstart panend', function (event) {
switch (event.type) {
case 'panstart':
width = $container.width();
break;
case 'panmove':
var localX = Math.max(Math.min(event.gesture.deltaX / width, 0.5), -0.5);
TweenLite.to($box[0], 0.3, {
rotationY: rotation + (90 * localX)
});
break;
case 'panend':
var localX = Math.max(Math.min(event.gesture.deltaX / width, 0.5), -0.5);
if (localX >= 0.25) {
rotation += 90;
} else if (localX <= -0.25) {
rotation -= 90;
}
TweenLite.to($box[0], 1.5, {
rotationY: rotation,
ease: Elastic.easeOut
});
break;
}
});
});
EndJS
32px
32px
960px
312px
<div class="container">
<div class="box">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
<div class="face left">
Left
</div>
<div class="face right">
Right
</div>
</div>
</div>
<div class="container">
<div class="box">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
<div class="face left">
Left
</div>
<div class="face right">
Right
</div>
</div>
</div>
<div class="container">
<div class="box">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
<div class="face left">
Left
</div>
<div class="face right">
Right
</div>
</div>
</div>
0px
0px
1024px
600px
False