Depot43-Unterlagen - Transition Post-it

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Transition Post-it</title>
	<style>
	div.post-it {
		background:#FFFFA5;
		height:150px;
		width:150px;
		margin: 40px auto;
		padding:18px;
		box-shadow: 1px 1px 2px black;
		text-align:center;
		transform:rotate(-6deg);
		cursor:pointer;
		-moz-transition:-moz-transform .4s ease-in-out;
		-o-transition:-o-transform .4s ease-in-out;
		-webkit-transition:-webkit-transform .4s ease-in-out;
	}
	div.post-it:hover, div.post-it:focus {
		box-shadow: 3px 3px 6px black;
		-webkit-transform: scale(1.25);
		-moz-transform: scale(1.25);
		-o-transform: scale(1.25);
		position:relative;
	}
	</style>
</head>
<body>
	<div class="post-it">
		<h2>Post-it</h2>
		<p>mach was schlaues damit ...</p>
	</div>
</body>
</html>


 

            

Hinweis

Vorbereitet wird die transition in den CSS-Eigenschaften des Objekts.

-moz-transition:-moz-transform .4s ease-in-out;
 -o-transition:-o-transform .4s ease-in-out;
 -webkit-transition:-webkit-transform .4s ease-in-out;

Die CSS-Eigenschaft skalieren wird dem Event "hover / focus" mitgegeben.

-webkit-transform: scale(1.25);
 -moz-transform: scale(1.25);
 -o-transform: scale(1.25);

Die Eigenschaft rotieren wird nicht an das Event-Objekt übergeben, sie wird auf den Standardwert zurück animiert.