Beispiel:CSS3 transform-style.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<style>
.scene {
width: 15em;
height: 15em;
border: thin solid #CCC;
margin: 1em;
perspective: 600px;
transform-style: preserve-3d;
}
.panel {
width: 100%;
height: 100%;
border: medium solid;
background: #dfac20;
}
#arrow {
translate: 0 -90px;
rotate: 1 1 1 -45deg;
}
</style>
<title>transform-style: preserve-3d</title>
</head>
<body>
<h1>transform-style: preserve-3d;</h1>
<figure class="scene">
<div class="panel"></div>
<svg id="arrow">
<path d="M0,50 h200 v-30 l45,45 l-45,45 v-30 h-200z" fill="#c82f04" stroke="black" stroke-width="2"/>
</svg>
<figcaption><code> transform-style: preserve-3d;</code></figcaption>
</figure>
</body>
</html>