transform x and transformy werkt niet tegeijk
Code (php)
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
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
<style>
.custom-shape-divider-top-1709314495 {
/* position: absolute; */
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.custom-shape-divider-top-1709314495 svg {
/* position: relative; */
display: block;
width: calc(100% + 1.3px);
/* height: 56px; */
}
.custom-shape-divider-top-1709314495 .shape-fill {
fill: var(--fillsvg);
}
.mirrordivider {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
.mirrordividervertikaal {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg)
}
</style>
<div id="spiegeldivider" class="custom-shape-divider-top-1709314495 mirrordivider mirrordividervertikaal">
<svg id="divhoogte" style="height: 55px;" ata-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path id="iddivtype1" style="--fillsvg: #897CA1;" d="M1200 120L0 16.48 0 0 1200 0 1200 120z" class="shape-fill"></path>
</svg>
</div>
.custom-shape-divider-top-1709314495 {
/* position: absolute; */
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.custom-shape-divider-top-1709314495 svg {
/* position: relative; */
display: block;
width: calc(100% + 1.3px);
/* height: 56px; */
}
.custom-shape-divider-top-1709314495 .shape-fill {
fill: var(--fillsvg);
}
.mirrordivider {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
.mirrordividervertikaal {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg)
}
</style>
<div id="spiegeldivider" class="custom-shape-divider-top-1709314495 mirrordivider mirrordividervertikaal">
<svg id="divhoogte" style="height: 55px;" ata-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path id="iddivtype1" style="--fillsvg: #897CA1;" d="M1200 120L0 16.48 0 0 1200 0 1200 120z" class="shape-fill"></path>
</svg>
</div>
Dat probleem en oplossingen worden hier uitgelegd:
https://stackoverflow.com/questions/20624255/css3-transform-rotate-and-rotatey-not-working-together
via alleen transform wordt de linker en rechterkant boven- en onderkant dan wel gespiegeld. Weet nu in ieder geval wat ik in de classes moet aanpassen. bedankt voor de reactie