Rotar con un punto fijo
Publicado por Marta (32 intervenciones) el 07/03/2021 15:11:53
Buenas, tengo una imagen partida en dos. En un momento dado quiero hacer una rotación de la siguiente manera:
- la de la izquierda, rote hacia la izquierda, manteniendo fijo el punto inferior derecho
- la de la derecha, rote hacia la derecha, manteniendo fijo el punto inferior izquierdo.
Algo hago mal, pues la rotación la hace bien, pero no me mantiene los puntos fijos.
El código es este:
Aquí las dos imágenes,
- la de la izquierda, rote hacia la izquierda, manteniendo fijo el punto inferior derecho
- la de la derecha, rote hacia la derecha, manteniendo fijo el punto inferior izquierdo.
Algo hago mal, pues la rotación la hace bien, pero no me mantiene los puntos fijos.
El código es este:
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
<div class="marc">
<img class="dreta" src="imatges/noiaEsquerra.png">
<img class="esquerra" src="imatges/noiaDreta.png">
</div>
.marc {
background: url(../imatges/bolet.jpg) no-repeat right;
border: 10px solid #dfe0df;
transform: rotate(10deg);
position: fixed;right:8%;
height:30%;
top: 39%;
float: left; /* per què s'ajuntin les imatges */
}.dreta { height: 30vh; transform-origin: bottom left; animation-name: toLeft; animation-duration: 10s; animation-delay: 6s;float: left; /* per què s'ajuntin les imatges */
}.esquerra {
height: 30vh;transform-origin: bottom right;
animation-name: toRight;
animation-duration: 10s;
animation-delay: 6s;
float: left; /* per què s'ajuntin les imatges */
}@keyframes toLeft { 0% {transform:rotate(-10deg)} 100% {transform:rotate(-10deg)}}@keyframes toRight { 0% {transform:rotateY(10deg)} 100% {transform:rotateY(10deg)}}Aquí las dos imágenes,
Valora esta pregunta
0
