Depot43-Unterlagen - Transition ClipCart

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Transition ClipCart</title>
	<style>
	.flip-wrapper {
		-webkit-perspective: 1000;
		-moz-perspective: 1000;
		-o-perspective: 1000;
		perspective: 1000;
		margin: 30px auto 0 auto;
}

	.flip-wrapper:hover .flip-container,  
	.flip-wrapper.hover .flip-container {
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
		transform: rotateY(180deg);
}

	.flip-wrapper, .front-card, .back-card {
		width: 330px;
		height: 200px;
	}

	.flip-container {
		-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;
		transition: 0.6s;
		transform-style: preserve-3d;
		position: relative;
	}

	.front-card, .back-card {
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		backface-visibility: hidden;
		position: absolute;
		top: 0;
		left: 0;
	}

	.back-card {
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
		transform: rotateY(180deg);
		background-color: red;
		color:white;
		text-align:center;
	}
	p.hinweis {
		text-align:center;
	}
	</style>
</head>
<body>
	<p class="hinweis">Nach unten, darüber fahren!</p>
	<div class="flip-wrapper" ontouchstart="this.classList.toggle('hover');">
		<div class="flip-container">
			<div class="front-card"></div>
			<div class="back-card">
				<h2>CSS Transition</h2>
				<p>Mit einem einzigen Javascript-Event.</p>
			</div>
		</div>
	</div>
</body>
</html>


 

            

Hinweis > experimentell

Viele neue transform-Eigenschaften werden (Ende 2017) nicht von allen aktuellen Browsern unterstützt.

transition: 0.6s;
transform-style: preserve-3d;

Ausgeführt wird es von Webkit-Browsern Chrome und Safari.