Un peu plus de SVG
Un peu de SVG
Cube
face 1
face 2
face 3
face 4
face 5
face 6
Cylindre à base pentagonale
face 1
face 2
face 3
face 4
face 5
Des tables
Mettez des tables où vous voulez
CSS 3D - Starwarzer
C'est une époque de guerre civile. A bord de vaisseaux spatiaux opérant à partir d'une base cachée, les Rebelles ont emporté leur première victoire sur le maléfique Empire Galactique.
Au cours de la bataille, des espions rebelles ont réussi à dérober les plans secrets de l'arme absolue de l'Empire : l'Etoile de la Mort, une station spatiale blindée dotée d'un équipement assez puissant pour annihiler une planète tout entière. Poursuivie par des sbires sinistres de l'Empire, la princesse Leia file vers sa base dans son vaisseau cosmique, porteuse des plans volés à l'ennemi qui pourront sauver son peuple et restaurer la liberté dans la galaxie...
Le CSS:
#conteneur {
height: 400px;
background: black;
perspective: 800px;
overflow: hidden
}
#contenu {
height: 800px;
color: yellow;
padding: 50px;
font-size: 2em;
line-height: 200%;
text-align: justify;
animation: defilement ease-in infinite 30s;
-webkit-animation: defilement ease-in infinite 30s;
-o-animation: defilement ease-in infinite 30s;
}
@keyframes defilement {
0% {
transform: rotateX(60deg) translateY(350px);
-ms-transform: rotateX(60deg) translateY(350px);
-webkit-transform: rotateX(60deg) translateY(350px);
}
100% {
transform: rotateX(60deg) translateY(-2500px);
-ms-transform: rotateX(60deg) translateY(-2500px);
-webkit-transform: rotateX(60deg) translateY(-2500px);
}
}Le HTML:
<section id="conteneur">
<section id="contenu" class="debut">
<p>Le texte ici...</p>
</section>
</section>