The Ashes

Technology, Science and other news
May 10, 2009

3D Cube using new CSS transformations

Posted by : admin
Filed under : General

Paul Hayes has been playing with CSS transformations and making 3D cubes:

The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object. Currently only supported in recent WebKit and Gecko based browsers, most importantly Firefox 3.5+ -moz-transform (documentation) and Safari 3.2+ -webkit-transform (documentation).

This resulted in:

A 3D cube created with CSS
Supported browsers: Safari 3.2+, Google Chrome, Firefox 3.5+

Experiment with multiple cubes and CSS transitions, still no JavaScript
Supported browsers: Safari 4+, Google Chrome

WebKit initially put this in (iPhone needed it after all!) and it will be interesting to see what users come out of it. The full CSS for the simple example is below:

PLAIN TEXT
CSS:

  1.  
  2. .cube {
  3.         position: relative;
  4.         top: 200px;
  5. }
  6.  
  7. .rightFace,
  8. .leftFace,
  9. .topFace div {
  10.         padding: 10px;
  11.         width: 180px;
  12.         height: 180px;
  13. }
  14.  
  15. .rightFace,
  16. .leftFace,
  17. .topFace {
  18.         position: absolute;
  19. }
  20.  
  21. .leftFace {
  22.         -webkit-transform: skewY(30deg);
  23.         -moz-transform: skewY(30deg);
  24.         background-color: #ccc;
  25. }
  26.  
  27. .rightFace {
  28.         -webkit-transform: skewY(-30deg);
  29.         -moz-transform: skewY(-30deg);
  30.         background-color: #ddd;
  31.         left: 200px;
  32. }
  33.  
  34. .topFace div {
  35.         -webkit-transform: skewY(-30deg) scaleY(1.16);
  36.         -moz-transform: skewY(-30deg) scaleY(1.16);
  37.         background-color: #eee;
  38.         font-size: 0.862em;
  39. }
  40.  
  41. .topFace {
  42.         -webkit-transform: rotate(60deg);
  43.         -moz-transform: rotate(60deg);
  44.         top: -158px;
  45.         left: 100px;
  46. }
  47.  
Tags :

No Comments

(required)
(will not be published) (required)
(opitional)

cciash.com EN ES IT DE PT CZ FR RU
October 2018
M T W T F S S
« Sep    
1234567
891011121314
15161718192021
22232425262728
293031  

Pages

Categories

Resources

There are many online poker site where you can play but at poker.hk you can play the poker games with all the knowledge you need related to the game with the poker school available in both the English and Chinese language.

Super Casino

Now you can bet on any sports and any sporting events from all the comfort from your home. Bet770 allows you to bet on any events and match with in just 3 clicks. They also offers great odds on football betting for every premier and champions league match. Get £50 free in bets when you register.

Bingo770, offering best online bingo games with £7.70 free no deposit Bonus!