DIV omvormen tot een trapezium

[alienfruit]

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]

code:

.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>

[Gamebuster]

LamSchaap schreef op woensdag 20 oktober 2010 @ 16:06:

code:

*snip*

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 ]

[Bosmonster]

-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]

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

[alienfruit]

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]

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

code:

.lookatme {
   width: 100px;
   height: 100px;
   border: 50px solid #fff;
   border-bottom-color: #f00;
}

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

[Bosmonster]

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]

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

code:

.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)