|
|
| Ligne 2 : |
Ligne 2 : |
|
| |
|
| Goldorak : dessin animé de 1975 ..... | | Goldorak : dessin animé de 1975 ..... |
|
| |
|
| |
|
| |
| <html>
| |
| <head>
| |
| <meta charset="utf-8" />
| |
|
| |
| <style type="text/css">
| |
| body { font-family: sans-serif; }
| |
|
| |
| .scene {
| |
| width: 300px;
| |
| height: 200px;
| |
| border: 0px solid #CCC;
| |
| margin: 80px;
| |
| perspective: 300px;
| |
| }
| |
|
| |
| .box {
| |
| width: 300px;
| |
| height: 200px;
| |
| position: relative;
| |
| transform-style: preserve-3d;
| |
| transform: translateZ(-50px);
| |
| transition: transform 2s;
| |
| }
| |
|
| |
| .box.show-front { transform: translateZ( -50px) rotateY( 40deg); }
| |
| .box.show-back { transform: translateZ( -50px) rotateY(-145deg); }
| |
| .box.show-right { transform: translateZ(-150px) rotateY( -105deg); }
| |
| .box.show-left { transform: translateZ(-150px) rotateY( 105deg); }
| |
| .box.show-top { transform: translateZ(-100px) rotateX( -75deg); }
| |
| .box.show-bottom { transform: translateZ(-100px) rotateX( 75deg); }
| |
|
| |
| .box__face {
| |
| position: absolute;
| |
| border: 0px solid black;
| |
| font-size: 40px;
| |
| font-weight: bold;
| |
| color: white;
| |
| text-align: center;
| |
| }
| |
|
| |
| .box__face--front,
| |
| .box__face--back {
| |
| width: 300px;
| |
| height: 200px;
| |
| line-height: 200px;
| |
| }
| |
|
| |
|
| |
| .box__face--left {
| |
| width: 100px;
| |
| height: 200px;
| |
| left: 100px;
| |
| line-height: 200px;
| |
|
| |
| .box__face--right,
| |
| }
| |
|
| |
| .box__face--right{
| |
| width: 100px;
| |
| height: 200px;
| |
| left: 100px;
| |
| line-height: 200px;
| |
|
| |
| }
| |
|
| |
|
| |
| .box__face--top,
| |
| .box__face--bottom {
| |
| width: 300px;
| |
| height: 100px;
| |
| top: 50px;
| |
| line-height: 100px;
| |
| }
| |
|
| |
| .box__face--front { background: url(https://cdn.radiofrance.fr/s3/cruiser-production/2018/07/18fadfa9-f109-4c01-a0e6-6c1d3656026c/870x489_010_cin07001_190.webp); background-size: cover;}
| |
| .box__face--right { background: url(https://www.thefashion-geek.com/wp-content/uploads/2017/03/goldorak-action-toys-5.jpg); background-size: cover; }
| |
| .box__face--back { background: url(http://golem13.fr/wp-content/uploads/2018/07/goldorak-40ans.jpg); background-size: cover; }
| |
| .box__face--left { background: hsla(180, 100%, 50%, 0.7); }
| |
| .box__face--top { background: hsla(240, 100%, 50%, 0.7); }
| |
| .box__face--bottom { background: hsla(100, 100%, 50%, 0.7); }
| |
|
| |
| .box__face--front { transform: rotateY( 0deg) translateZ( 50px); }
| |
| .box__face--back { transform: rotateY(180deg) translateZ( 50px); }
| |
|
| |
| .box__face--right { transform: rotateY( 90deg) translateZ(150px); }
| |
| .box__face--left { transform: rotateY(-90deg) translateZ(150px); }
| |
|
| |
| .box__face--top { transform: rotateX( 90deg) translateZ(100px); }
| |
| .box__face--bottom { transform: rotateX(-90deg) translateZ(100px); }
| |
|
| |
| label { margin-right: 10px; }
| |
|
| |
| </style>
| |
| </head>
| |
|
| |
| <body>
| |
|
| |
|
| |
|
| |
| </body>
| |
| </html>
| |
|
| |
| <div class="scene">
| |
| <div class="box">
| |
| <div class="box__face box__face--front"></div>
| |
| <div class="box__face box__face--back"></div>
| |
| <div class="box__face box__face--right">D</div>
| |
| <div class="box__face box__face--left">G</div>
| |
| <div class="box__face box__face--top"></div>
| |
| <div class="box__face box__face--bottom"></div>
| |
| </div>
| |
|
| |
| </div>
| |
|
| |
| <div>
| |
| <p class="radio-group">
| |
| <label><input type="radio" name="rotate-cube-side" value="front" checked /> Devant </label>
| |
| <label><input type="radio" name="rotate-cube-side" value="back" /> Derrière </label>
| |
| <br>
| |
| <label><input type="radio" name="rotate-cube-side" value="left" /> ← </label>
| |
| <label><input type="radio" name="rotate-cube-side" value="right" /> →</label>
| |
| <label><input type="radio" name="rotate-cube-side" value="top" /> ↑ </label>
| |
| <label> <input type="radio" name="rotate-cube-side" value="bottom" /> ↓ </label>
| |
| </p> </div>
| |
|
| |
|
| |
|
| |
| <script type="text/javascript" src="rotate-cube-side.js"></script>
| |
|
| |
| </body>
| |
|
| |
| </html>
| |
Goldorak
Goldorak : dessin animé de 1975 .....
