Reine CSS Umsetzung einer Box (Teaser) die sich bei :hover 3 dimensional dreht und den Inhalt der ‚Rückseite‘ darstellt. 3D-Box, CSS-Cube oder aber 3D-Teaser wären vielleicht eine passende Bezeichnungen.
Animierter CSS3D Teaser
Was mittlerweile alleine mit CSS machbar ist, zeigt diese kleine CSS3D Umsetzung eines Cube-Teasers. Auf die Vorder- als auch auf der Rückseite können beliebige HTML-Elemente dargestellt werden. Probiert‘ es einfach mal aus, CSS- und SASS-Datei stehen zum Download bereit.
Sieht super aus und unkompliziert aufgebaut!
Ist es Open Source?
Hallo Eisl.
Du darfst den Code natürlich gerne verwenden. Genau dafür habe ich die Sourcen ja bereit gestellt :)
Viel Spass damit.
it has some problem with chrome 38.please check it
Looks really interesting on Chrome 38. I’ll try to fix it…
How can i make it animated for all the time with out hover???
This is the best css 3d flip box I found so far. I’m playing with it and trying to rotate it from right to left vertically.
to make it rotating opposite (from right to left)
.flank {
..
right: -($box-width + $perspective) / 2;.
…
}
…and transform rotateY – add negative (-180deg)