Ik heb iets met CSS3 gevonden, maar dat werkt allen maar met 'hover' en wil wil het zo graag automatisch en continue willen draaien.
Kan iemand hier een bijdrage aan leveren?
Bij voorbaat dank,
Theozelf@gmail.com
Zie de code hieronder:
<html>
<head>
<style type="text/css">
/* entire container, keeps perspective */
.flip-container {
-webkit-perspective: 500;
-moz-perspective: 500;
-ms-perspective: 500;
-o-perspective: 500;
perspective: 500;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 127px;
height: 67px;
}
/* flip speed goes here */
.flipper {
-webkit-transition: 2s;
-moz-transition: 2s;
-ms-transition: 2s;
-o-transition: 2s;
transition: 2s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img src="pix/10ev.jpg">
</div>
<div class="back">
<img src="pix/10ea.jpg">
</div>
</div>
</div>
</body>
</html>
Kan iemand hier een bijdrage aan leveren?
Bij voorbaat dank,
Theozelf@gmail.com
Zie de code hieronder:
<html>
<head>
<style type="text/css">
/* entire container, keeps perspective */
.flip-container {
-webkit-perspective: 500;
-moz-perspective: 500;
-ms-perspective: 500;
-o-perspective: 500;
perspective: 500;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 127px;
height: 67px;
}
/* flip speed goes here */
.flipper {
-webkit-transition: 2s;
-moz-transition: 2s;
-ms-transition: 2s;
-o-transition: 2s;
transition: 2s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img src="pix/10ev.jpg">
</div>
<div class="back">
<img src="pix/10ea.jpg">
</div>
</div>
</div>
</body>
</html>
