Déplier un cube 3D

**6116d** · 30/12/2015, 10h48

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 !

**6116d** · 30/12/2015, 11h02

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...

Déplier un cube 3D [CSS 3]

CSS

Vue hybride

Discussions similaires

Partager

Partager