0 : 0.00 €
Web designing requires a highly professional outlook and the know how of the correct procedures that go about making a design attractive. A factor that every designer should be familiar is the fact that HTML5 and CSS3 are parallel to each other and blend together.
3D graphics, 3D Games and 3D Animations can be easily developed using both HTML5 and CSS3.
Rounded corners, gradients and drop shadows are well known features of CSS3, but beyond these there lie CSS transitions, transforms and animations. In combination they create effects never before achievable.
There are some very popular 3D animations that find a practical usage and are created using CSS3 and HTML5
They are supported in Safari and Chrome, and shortly in Firefox 10 and Internet Explorer 10. They perform superbly on iOS devices, even on iPhone 3G and iPad.
Below are mentioned 15 fantastic examples for your assistance.
1. 3D Rotating Molecules on the iPhone/iPad
Turns out, canvas kinda sucks for developing full-screen animations on the iPhone and iPad. Without hardware acceleration and a more efficient clearing mechanism, it just doesn’t cut the mustard.
You can rotate the molecule around with your fingers, and pinch to zoom in and out. At blisteringly high frame rates.
(It currently works on iOS devices, Safari, and the latest dev version of Chrome... basically, any browser that supports true CSS 3D transformations / animations.)
2. Beercamp 2011
This Inception experience for SXSW Beercamp 2011 uses 3D transforms to navigate through layers of content as you scroll. A simple translation in the z-axis put to great effect, with a 2D transform. 3D detection uses Modernizr.
3. Panic — Transmit
You need to transfer files. Maybe to an FTP or SFTP server, or the cloud via Amazon S3, or using WebDAV. You maintain a website, do backups, or upload photos.
Here 3D transforms add that little touch of class, reproducing a native app effect on the web.
4. Reeder for Mac
Reeder is a Google Reader client, which means you need a Google Reader account to use the app. Don't have one? No problem, you can get one here:
http://google.com/reader
When using Reeder, all changes will be synced with Google Reader. This means if (for example) you read an article in Reeder it will also be marked as read in Google Reader. The same is true if you read in Google Reader. When syncing the next time, Reeder will just pick up the changes.
You’ll see their box-like logo magically bounce and rotate to different views in a wonderfully smooth animation. A fantastic example of 3D CSS in action.
5. BigText
At its simplest, the BigText jQuery plugin takes a single element and sizes the text inside of its child <div>s to fit the width of the parent element.
6. Wonder Webkit
A tribute to the awesome wonder-wall by tha.ltd.
The wonder-wall effect is inspired by this great example, the Javascript Matrix library used is this, and the book covers are taken from here.
The interesting stuff is the possibility of manipulate the transformation matrix of any element of the DOM, In this case we get the matrix given only the 4 end points of the element, which is done porting OpenCV's cvGetPerspectiveTransform function and some trickery, the JavaScript code is here.
Right now the effect works on latest Safari, Chrome, iOS, Firefox Nightly and IE10.
7. The Matrix Revolutions
Matrices are like the warp engine in star-trek: space-time-continuum is changed from the outside, but the people in the star-craft don't notice anything.
Matrices do have some more advantages:
- Its possible to accomplish a lot of manipulations (turning, scaling, shearing, moving) at the same time. And as we have to add vendor specific prefixes for every transformation, it doesn't harm that we can "compress" them into one matrix. This will help keeping our code lean and saving CPU at the same time.
- It is quite easy to combine matrices by using low level math operations: addition, subtraction, multiplication.
There’s a sandbox for playing with properties; this time matrix values and perspective.
Warning, some mathematics required.
8. CSS3 Time Machine
Joe Critchley has taken Apple’s time machine interface and reproduced it with HTML and CSS to create an awesome image slideshow.
9. Flux
Flux slider is a CSS3 animation based image transition framework, inspired in part by the fantastic Nivo Slider jQuery plugin.
Instead of the traditional Javascript timer based animations used by jQuery, Flux utilises the newer, more powerful CSS3 animation technology. Its in a fairly early/rough state at the moment but testing on the iPhone/iPad does appear to produce much smoother animations. Desktop performance (as with Nivo) is very smooth but the use of CSS3 enables us to produce some new effects that Nivo can’t, e.g. rotations.
The aim is to use hardware acceleration where possible to improve performance on less powerful devices, such as mobiles & tablets.
10. Photo Transitions
As an Apple demos this is best viewed in Safari. These transitions illustrate 3D CSS’s ability to create unique but intuitive user interactions on your web page.
11. VR
You can use HTML, CSS, and JavaScript to create virtual scenes in your web pages that work without any additional plug-in software. CSS transforms are used to position six images in 3D space to form a cube with the user's viewpoint inside. As you navigate, the cube is rotated to reflect the new appropriate position. Any standard web browser behaviors that would disrupt the experience — such as showing a selection color in Safari on the desktop, or the Save Image panel in Safari on iOS — can be disabled with a few additional CSS properties.
12. A 3D FPS concept
Keith Clark tests the feasibility of 3D environments using only HTML and CSS. Use the W and S keys and mouse to move around. It works best in Safari.
13. Natural object-rotation
In this tutorial we will learn how to build a 3D packshot in HTML and CSS by applying some CSS 3D-transforms. Then we will add some Javascript to make the object freely rotatable in 3d space. And as we will enhance our Javascript with some touch-interactivity, the packshot will also work nicely in Safari for iOS-platforms like iPhone or iPad. A warning: be prepared that the second part of this tutorial will be quite math-heavy.
14. 3D cube
Starting with the basics, 3D transforms are often used to rearrange elements into geometric shapes. Bonuses include click and drag and gesture support to rotate the cube.
15. Understanding CSS 3D transforms
Dirk Weber explains the steps necessary to create something with 3D transforms with a simple butterfly animation.
