Discussion :

[JefReb]

Bonjour à tous, je cherche à faire tourner un cube avec faces frontales rectangulaires.
Je pensais avoir bien programmé l'animation, mais je trouve que le point de fuite n'est pas bon.

Je trouve que la face arrière ne reflète pas le point de fuite.
Dans cet exemple https://codepen.io/JefReb/pen/vdavWe on voit bien que la face arrière est normalement plus petite que la face avant.

Mais dans l'animation que je fais cela ne semble pas être le cas:https://codepen.io/JefReb/pen/eVjbEO
Quelqu'un pourrait-il m'éclairer?
C'est certainement lié à perspective, mais si je mets autre chose que none c'est encore plus catastrophique.

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
.cube {
	position: relative;
	width: 300px;
	height: 200px;
	margin: 20px auto;
	transform-style: preserve-3d;
	perspective: none;
        perspective-origin: 50% 50%;
	transform-origin: 50% 50% 0;
	animation: animate infinite 30s;
}
.cube > div {
	position: absolute;
	width: 300px;
	height: 200px;
	border: 1px solid black;
}
.cube div:nth-child(1) {
	transform: translateZ(150px);
	background-color: red;
}
.cube div:nth-child(2) {
	transform: rotateY( 90deg) translateZ(150px);
	background-color: blue;
}
.cube div:nth-child(3) {
	transform: rotateY(-90deg) translateZ(150px);
	background-color: yellow;
}
.cube div:nth-child(4) {
	transform: rotateY(-180deg) translateZ(150px);
	background-color: green;
}
@keyframes animate {
 0% {
transform: rotateY(360deg);
}
 25% {
transform: rotateY(270deg);
}
 50% {
transform: rotateY(180deg);
}
 75% {
transform: rotateY(90deg);
}
 100% {
transform: rotateY(0deg);
}
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="cube">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

ps: je n'ai pas mis les préfixes comme -webklit- pour simplifier.

[headmax]

Salut petit essais donc loin d'être au fait sur ce qui se fait de mieux ...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<div class="stage">
  <div class="cube">
    <div class="back"></div>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="front"></div>
  </div>
</div>

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
 
.stage {margin:auto;
  width: 300px; height: 300px;
  -webkit-perspective: 1600px;
  -webkit-perspective-origin: 50% 200px;
}
div.back,div.top,div.bottom,div.left,div.right, div.front {
  display: block; position: absolute;
  width: 300px; height: 300px;  
  text-align:center;
  font-size:6em;
  vertical-align:middle;
  margin-top:1em;
}
.cube { -webkit-transform-style: preserve-3d; 
-webkit-animation: rotate 30s infinite linear;}
div { -webkit-transform-origin: 50% 50% 0; }
.front { -webkit-transform: translateZ(150px); 
background-color: #3A9BC8;}
.back { -webkit-transform: rotateY(180deg) translateZ(150px); 
background-color: #60c2ef;}
.top { -webkit-transform: rotateX(90deg) translateZ(150px); 
background-color: #2E7392;}
.bottom { -webkit-transform: rotateX(-90deg) translateZ(150px); }
.left { -webkit-transform: rotateY(-90deg) translateZ(150px);
background-color: #5B9BB9;}
.right { -webkit-transform: rotateY(90deg) translateZ(150px); 
background-color: #3B8CB1;}
@-webkit-keyframes rotate {
  0% { -webkit-transform: rotateY(0); }
  100% { -webkit-transform: rotateY(-360deg); }
}
 
.bottom {
  -webkit-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.7);
  background-color: rgba(0, 0, 0, 0);
}
.back{
  background-color: red;
}
.left{
  background-color: blue;
}
.right{
  background-color: yellow;
}
.front{
  background-color: green;
}

[JefReb]

Merci Headmax,
j'ai repris ton exemple. La différence, c'est que le cube est encapsulé dans un container et que c'est celui-ci qui a la perspective.
Apparemment c'est de là que j'ai ce problème de point de fuite. Cela marche, mais je ne comprends pas pourquoi je ne peux pas mettre le point de fuite (perspective) directement dans le cube.
J'ai rajouté un script pour arrêter l'animation avec la souris (si ça intérresse certains)

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
#container	{
	width: 300px;
	height: 300px;
	margin: 100px auto;
	-webkit-perspective: 1600px;
	perspective: 1600px;
	-webkit-perspective-origin: 50% 200px;
	perspective-origin: 50% 150px;
}
#cube {
	position:relative;
	width: 300px;
	height: 200px;	
	transform-style: preserve-3d;
	animation: animate infinite 30s;
}
#cube > div {
	position: absolute;
	width: 400px;
	height: 200px;
	border: 1px solid black;
}
#cube div:nth-child(1) {
	transform: rotateY( 0deg) translateZ(200px);
	background-color:yellow;
}
#cube div:nth-child(2) {
	transform: rotateY( 90deg) translateZ(200px);
	background-color:blue;
}
 
#cube div:nth-child(3) {
	transform: rotateY(-90deg) translateZ(200px);
	background-color:green;
}
#cube div:nth-child(4) {
	transform: rotateY(-180deg) translateZ(200px);
	background-color:red;
}
@keyframes animate {
0% {
transform: rotateY(360deg);
}
 25% {
transform: rotateY(270deg);
}
 50% {
transform: rotateY(180deg);
}
 75% {
transform: rotateY(90deg);
}
 100% {
transform: rotateY(0deg);
}
}
@-webkit-keyframes animate {
0% {
transform: rotateY(360deg);
}
 25% {
transform: rotateY(270deg);
}
 50% {
transform: rotateY(180deg);
}
 75% {
transform: rotateY(90deg);
}
 100% {
transform: rotateY(0deg);
}
}
#cube {
	color: white;
	font-size:400%;
	font-weight:bold;
	text-align:center;
}

Code script :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function PauseAnim() 
{ 
  document.getElementById('cube').style.animationPlayState='paused'; 
  document.getElementById('cube').style.WebkitAnimationPlayState='paused'; 
} 
 
function LectureAnim() 
{ 
  document.getElementById('cube').style.animationPlayState='running'; 
  document.getElementById('cube').style.WebkitAnimationPlayState='running'; 
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="container">
<div id="cube" style="animation-play-state: running;" onmouseover="PauseAnim();" onmouseout="LectureAnim();">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
</div>

Je sais il manque des préfixes -webkit-

[JefReb]

Non, il y a quelquechose qui ne colle pas.
En mettant un cadre pour voir l'animation, on voit bien que le cube ne tourne pas autour d'un axe et que celui-ci se déplace.
https://codepen.io/JefReb/pen/MQqbRm
Quelqu'un pourrait-il me montrer mon erreur?
Merci d'avance

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
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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Rotation frontale simple</title>
<style>
#container {
        width: 600px;
        height: 600px;
        margin: 100px auto;
        perspective: 1600px;
        perspective-origin: 50% 30%;
        border:2px solid red;
}
#cube {
        position: relative;
        top:100px;
        left:100px;
        transform-style: preserve-3d;
        animation: animate infinite 10s;
}
#cube > div {
        position: absolute;
        width: 400px;
        height: 200px;
        border: 1px solid black;
}
#cube div:nth-child(1) {
        transform: rotateY( 0deg) translateZ(200px);
}
#cube div:nth-child(2) {
        transform: rotateY( 90deg) translateZ(200px);
}
#cube div:nth-child(3) {
        transform: rotateY(-90deg) translateZ(200px);
}
#cube div:nth-child(4) {
        transform: rotateY(-180deg) translateZ(200px);
}
@keyframes animate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
#cube {
        color: white;
        font-size: 400%;
        font-weight: bold;
        text-align: center;
}
</style>
</head>
<body>
<div id="container">
  <div id="cube">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</div>
 
</body>
</html>

[headmax]

Salut jefReb, n'étant pas webdesigner plutôt curieux je me limiterais pour expliquer le pourquoi la div container ne peux pas faire ce que tu souhaite tout simplement qu'elle est elle même dans plan en perspective d'ailleurs les propriétés css le défini en tant que tel...

Pour faire ce que tu souhaite, rien ne t’empêche de créer un second container sans perspective dans un plan linéaire par défaut tu pourras faire ce que tu souhaite exemples a partir de l'essai : (body utilisé comme container)

https://codepen.io/headmax/pen/jZvPJV

https://codepen.io/headmax/pen/NyLpPy

[JefReb]

Merci Headmax,
Mais j'ai du mal à comprendre, car ce que j'ai appelé container, tu l'appelles stage, seul tu utilises body comme un autre container.
Donc là je trouve que cela complique, n'y-a-t-il pas plus simple, car en faite, ta solution consiste à encapsulé à nouveau dans une autre boite qui encapsule le cube.
ça fait beaucoup ...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div class="boite">
<div class="stage">
  <div class="cube">
    <div class="back"></div>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="front"></div>
  </div>
</div>
</div>