« Zurück zum Artikel

Beispiel 1

#flat
.test1
.test2
#preserve
.test1
.test2



Hier der zugehörige CSS-Code:

div {
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 10px;
	border: 1px solid #000000;
	color: #000000;
}

#flat, #preserve {
	margin: 50px;
	background: #dddddd;
	transform: translateZ(20px);
}

#flat, #flat div {
	transform-style: flat;
}

#preserve, #preserve div {
	transform-style: preserve-3d;
}

.test1 {
	background: #555555;
	transform: translateZ(-20px);
}

.test2 {
	background: #ff0000;
	transform: translateZ(50px);
}