add template for CSS 3D Transforms
| Neue Datei |
| | |
|---|
| | | <!DOCTYPE html>
|
|---|
| | | <html>
|
|---|
| | | <head>
|
|---|
| | | <meta charset="UTF-8">
|
|---|
| | | <style>
|
|---|
| | | * {
|
|---|
| | | box-sizing: border-box;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | body {
|
|---|
| | | width: 200px;
|
|---|
| | | height: 200px;
|
|---|
| | |
|
|---|
| | | perspective: 1000px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .cube {
|
|---|
| | | position: relative;
|
|---|
| | |
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | |
|
|---|
| | | transform-style: preserve-3d;
|
|---|
| | |
|
|---|
| | | transition: transform 1s;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .cube div {
|
|---|
| | | display: flex;
|
|---|
| | | align-items: center;
|
|---|
| | | justify-content: center;
|
|---|
| | |
|
|---|
| | | font-size: 25px;
|
|---|
| | |
|
|---|
| | | width: 200px;
|
|---|
| | | height: 200px;
|
|---|
| | |
|
|---|
| | | border: 1px solid black;
|
|---|
| | |
|
|---|
| | | backface-visibility: hidden;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .top {
|
|---|
| | | |
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .bottom {
|
|---|
| | | |
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .left {
|
|---|
| | | |
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .right {
|
|---|
| | | |
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .front {
|
|---|
| | | |
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .back {
|
|---|
| | | |
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | | </head>
|
|---|
| | | <body>
|
|---|
| | | <div class="cube">
|
|---|
| | | <div class="front">3</div>
|
|---|
| | | <div class="back">4</div>
|
|---|
| | | <div class="right">5</div>
|
|---|
| | | <div class="left">2</div>
|
|---|
| | | <div class="top">1</div>
|
|---|
| | | <div class="bottom">6</div>
|
|---|
| | | </div>
|
|---|
| | | </body>
|
|---|
| | | </html>
|
|---|
