IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Déplier un cube 3D [CSS 3]


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Novice
    Inscrit en
    Mars 2014
    Messages
    65
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Novice

    Informations forums :
    Inscription : Mars 2014
    Messages : 65
    Par défaut Déplier un cube 3D
    Bonjour,

    J'essaye de déplier un cube 3D mais je n'arrive pas à faire tout à fait ce que je souhaite...
    Ma face 2 se déplier sur la droite mais elle tourne une première fois (au début de la rotation) puis se déplie à l'envers.
    Malgré pas mal de recherches et d'essais je n'y arrive toujours pas..

    J'aimerai que ça donne à peu près le même effet que cet exemple:
    http://tympanus.net/Development/PFold/

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    #contenu
    { 
       width:position:relative; 
       width:300px; 
       height:200px; 
       margin:0px auto;  
    }
     
    .face
    {
    	width:300px;
    	height:300px;
    	position:absolute;
    	line-height:300px;
    	text-align:center;
    	font-size:80px;
    	border:solid 1px black;
    }
     
    .cote1
    {
    	background-color:red;
    	z-index:10;
    }
     
    .cote2
    {
    	background-color:green;
    	transform:translateZ(-150px) translateX(150px) rotateY(90deg);
    	animation:face2 5s;
    	animation-delay:1s;
    	animation-fill-mode: forwards;
    }
     
    .cote3
    {
    	background-color:yellow;
    	transform:translateZ(-150px) translateX(-150px) rotateY(-90deg);
    }
     
    .cote4
    {
    	background-color:grey;
    	transform:translateZ(-150px) translateY(150px) rotateX(-90deg);
    }
     
    .cote5
    {
    	background-color:blue;
    	transform:translateZ(-150px) translateY(-150px) rotateX(90deg);
    }
     
    .cote6
    {
    	background-color:orange;
    	transform:translateZ(-300px);
    }
     
    .cube
    {
    	position:relative;
    	width:300px;
    	height:300px;
    	animation:AnimCube 1s;
    	transform-style: preserve-3d;
    }
     
    @keyframes AnimCube
    {
    	from {}
    	to {transform-origin: 50% 50%; transform: rotateX(360deg) rotateY(360deg)}
    }
     
    @keyframes face2
    {
    	from {}
    	to {transform-origin: 100% 0%; transform: rotateY(180deg)}
    }
     
    /*@keyframes face4
    {
    	from {}
    	to {transform-origin: 100% 100%; transform:  rotateX(-180deg)}
    }
     
    @keyframes face3
    {
    	from {}
    	to {transform-origin: 100% 0%; transform: rotateX(180deg)}
    }
     
    @keyframes face2
    {
    	from {}
    	to {transform-origin: 100% 100%; transform: rotateZ(180deg) }
    }
     
    	animation:face5 5s;
    	animation-delay:1s;
    	animation-fill-mode: forwards;
    */

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <html>
    <head>
    	<link rel="stylesheet" type="text/css" href="style.css">
    	<title>Accueil</title>
    </head>
    <body>
    	<div id="contenu"> 
    	   <div class="cube"> 
    		  <div class="face cote1">1</div> 
    		  <div class="face cote2">2</div> 
    		  <div class="face cote3">3</div> 
    		  <div class="face cote4">4</div> 
    		  <div class="face cote5">5</div> 
    		  <div class="face cote6">6</div> 
    	   </div> 
    	</div>
    </body>
    </html>

    Merci pour votre aide !

  2. #2
    Membre confirmé
    Homme Profil pro
    Novice
    Inscrit en
    Mars 2014
    Messages
    65
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Novice

    Informations forums :
    Inscription : Mars 2014
    Messages : 65
    Par défaut
    J'ai trouvé... Une rotation de 1deg avec un translate et ça fonctionne

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    transform: rotateY(-1deg) translate(300px, 0px)

    Désolé de la discussion un peu inutile...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. lier un cube à un objet (POO)
    Par Hypnos dans le forum OpenGL
    Réponses: 12
    Dernier message: 26/08/2003, 21h46
  2. cubes temps réel en ROLAP
    Par Guizz dans le forum MS SQL Server
    Réponses: 4
    Dernier message: 09/07/2003, 16h36
  3. [debutant] Probleme pour dessiner un simple cube
    Par scorpiwolf dans le forum DirectX
    Réponses: 6
    Dernier message: 02/07/2003, 20h29
  4. texture cube glTexImage2D et moi
    Par Toukan dans le forum OpenGL
    Réponses: 3
    Dernier message: 04/06/2003, 15h01
  5. [direct3d][c#]créer un cube et le sauvegarder
    Par maxvador dans le forum DirectX
    Réponses: 2
    Dernier message: 23/05/2003, 23h08

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo