|
|
| 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>
| |
