basti1012 > 12.09.2018, 19:35
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Transformation </title>
<style>
.card {
width: 375px;
height:558px;
position: relative;
-webkit-perspective: 600;
}
.front {
width: 100%;
height:558px;
background-color: #ff0000;
position: absolute;
z-index: 200;
-webkit-transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transition: all 1.4s ease-in-out;
}
.back {
width: 100%;
height: 558px;
background-color: #00ffff;
position: absolute;
z-index: 100;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transition: all 1.4s ease-in-out;
}
.card.turn .front {
z-index: 200;
-webkit-transform: rotateY(180deg);
}
.card.turn .back {
z-index: 300;
-webkit-transform: rotateY(0deg);
}
}
</style>
<script>
document.querySelector('#card')-addEventListener("click" , showbanner);
function showbanner() {
var element = document.querySelector('card');
var classname = 'turn';
if(element.classList.contains(classname)) {
element.classList.remove(classname)
} else {
element.classList.add(classname)
}
}
</script>
</head>
<body>
<div class="card">
<div class="front">
<p> Dies ist die Vorderseite der Karte </p>
</div>
<div class="back">
<p> Dame </p>
</div>
</div>
</body>
</html>