transform x and transformy werkt niet tegeijk

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Paul Weiss

Paul Weiss

09/08/2024 12:27:24
Quote Anchor link
hallo. iedereen. ik heb het onderstaande svg element. transformy (class mirrordivider) and transformx (mirrordividervertikaal) werken beide. echter wanneer ik ze beide toepas dan wordt transform y teniet gedaan. Heeft iemand een idee wat hier verkeerd aan is?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
 
PHP hulp

PHP hulp

11/10/2024 10:37:18
 
Ward van der Put
Moderator

Ward van der Put

09/08/2024 16:41:41
Quote Anchor link
De eerste rotatie beïnvloedt de hoek waaronder de tweede rotatie wordt uitgevoerd. Rotaties worden namelijk niet uitgevoerd rond absolute assen in drie dimensies (vanuit het zicht van de toeschouwer), maar ten opzichte van de relatieve assen van het object (vanuit de huidige 3D-stand van het object zelf).

Dat probleem en oplossingen worden hier uitgelegd:

https://stackoverflow.com/questions/20624255/css3-transform-rotate-and-rotatey-not-working-together
 
Paul Weiss

Paul Weiss

09/08/2024 17:37:01
Quote Anchor link
inderdaad werken niet samen x en y. wat ook logisch is bij nader inzien.
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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.