Toon posts:

DIV omvormen tot een trapezium

Pagina: 1
Acties:

  • alienfruit
  • Registratie: maart 2003
  • Laatst online: 03:46

alienfruit

the alien you never expected

Topicstarter
Ik ben momenteel bezig om een simpele animatie te maken . Een kaart uitvouw animatie alleen nu probeer ik al een tijdje om dit te maken. Ik dacht dit eenvoudig te kunnen doen met de nieuwe CSS functionaliteit. Alleen ik krijg het niet voor elkaar. Eigenlijk wil ik een reeks trapeziums maken van een DIV alleen krijg ik het niet voor elkaar.

Weet iemand een manier hoe zo'n vierhoek kan maken met CSS3? Ik heb gekeken naar de skewX/skewY functie maar dan wordt het een parallelogram.

  • LamSchaap
  • Registratie: september 2007
  • Laatst online: 26-09 16:11
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.container{
    width: 250px;
    height: 250px;
    -webkit-perspective: 200;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective-origin: 50% 50%;
}

.flip{
    height: 100px;
    width: 100px;
    margin: auto;
    -webkit-transform: rotateX(45deg) ;
    background: red;
}

<div class="container">
    <div class="flip">
    </div>
</div>

Kwalitatief blaten


  • Gamebuster
  • Registratie: juli 2007
  • Laatst online: 17-09 17:35
Je CSS staat niet in style-tag :+

-en webkit only? Geen mozilla/"crossbrowser" oplossing?

[Voor 63% gewijzigd door Gamebuster op 20-10-2010 16:09]

Let op: Mijn post bevat meningen, aannames of onwaarheden


  • Bosmonster
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52

Bosmonster

*zucht*

-moz-transform ;) (en -o-transform)

crossbrowser gaat hem niet worden tenzij je canvas gaat gebruiken (met IE fallback).

[Voor 7% gewijzigd door Bosmonster op 20-10-2010 16:13]


  • LamSchaap
  • Registratie: september 2007
  • Laatst online: 26-09 16:11
Bosmonster schreef op woensdag 20 oktober 2010 @ 16:12:
-moz-transform ;) (en -o-transform)

crossbrowser gaat hem niet worden tenzij je canvas gaat gebruiken (met IE fallback).
"rotateX()" is een 3d transforms. Word alleen nog ondersteund in de webkit browsers.

Heb er wel 's vaker mee gespeeld.
YouTube: CSS3 3D transform animation-timing-function difference

Kwalitatief blaten


  • alienfruit
  • Registratie: maart 2003
  • Laatst online: 03:46

alienfruit

the alien you never expected

Topicstarter
Bosmonster, heb je enig idee wat een goede manier is om dit te doen met de canvas? Ik moet namelijk een plaatje in trapezium vorm gooien/distorten. Heb jij misschien enig inzicht wat de fallback voor IE is? Ik weet dat er ExplorerCanvas bestaat. Maar is dit goed bruikbaar?

  • OkkE
  • Registratie: oktober 2000
  • Laatst online: 04-06 12:54

OkkE

Front-end ninja :+

Is dat niet ook te faken met een hele grote border?

code:
1
2
3
4
5
6
.lookatme {
   width: 100px;
   height: 100px;
   border: 50px solid #fff;
   border-bottom-color: #f00;
}

[Voor 6% gewijzigd door OkkE op 20-10-2010 19:58]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • Bosmonster
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52

Bosmonster

*zucht*

alienfruit schreef op woensdag 20 oktober 2010 @ 19:38:
Bosmonster, heb je enig idee wat een goede manier is om dit te doen met de canvas? Ik moet namelijk een plaatje in trapezium vorm gooien/distorten. Heb jij misschien enig inzicht wat de fallback voor IE is? Ik weet dat er ExplorerCanvas bestaat. Maar is dit goed bruikbaar?
Ik heb zelf niet zoveel ervaring met het gebruik van canvas, dat is niet echt mijn ding, te wiskundig. Maar naar wat ik begrijp is de canvas fallback voor IE prima bruikbaar.

Vast wel iets over te vinden over hoe je images kunt distorten daarmee :)

  • alienfruit
  • Registratie: maart 2003
  • Laatst online: 03:46

alienfruit

the alien you never expected

Topicstarter
OkkE schreef op woensdag 20 oktober 2010 @ 19:58:
Is dat niet ook te faken met een hele grote border?

code:
1
2
3
4
5
6
.lookatme {
   width: 100px;
   height: 100px;
   border: 50px solid #fff;
   border-bottom-color: #f00;
}
Jawel, dat gebruikt bijv. http://lab.smashup.it/flip/ alleen kan je vervolgens door het gebruik van grote borders niet een plaatje gebruiken iig niet tijdens de animatie. Ik heb geprobeerd met een img-element en een background-image maar geen succes. Ik heb border-image niet geprobeerd omdat dit bij de meeste browsers niet werkt (bij mijnen weten ook een CSS3 iets)
Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee