« Discussion utilisateur:Pambou » : différence entre les versions
De Wikirak
→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 à 14:52
Goldorak
Goldorak : dessin animé de 1975 .....
D
G
<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>
