Discussion utilisateur:Pambou : Différence entre versions
(→Goldorak : nouvelle section) |
|||
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> |
Version du 22 mai 2019 à 15:52
Goldorak
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>
<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>
<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>
<script type="text/javascript" src="rotate-cube-side.js"></script>
</body>
</html>