Discussion utilisateur:Pambou
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>
