It's time to learn how to play poker for free on Casino770 if you feel like winning enough to take part in the biggest live tournaments in the world!
The Ashes
3D Cube using new CSS transformations
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:
-
-
.cube {
-
position: relative;
-
top: 200px;
-
}
-
-
.rightFace,
-
.leftFace,
-
.topFace div {
-
padding: 10px;
-
width: 180px;
-
height: 180px;
-
}
-
-
.rightFace,
-
.leftFace,
-
.topFace {
-
position: absolute;
-
}
-
-
.leftFace {
-
-webkit-transform: skewY(30deg);
-
-moz-transform: skewY(30deg);
-
background-color: #ccc;
-
}
-
-
.rightFace {
-
-webkit-transform: skewY(-30deg);
-
-moz-transform: skewY(-30deg);
-
background-color: #ddd;
-
left: 200px;
-
}
-
-
.topFace div {
-
-webkit-transform: skewY(-30deg) scaleY(1.16);
-
-moz-transform: skewY(-30deg) scaleY(1.16);
-
background-color: #eee;
-
font-size: 0.862em;
-
}
-
-
.topFace {
-
-webkit-transform: rotate(60deg);
-
-moz-transform: rotate(60deg);
-
top: -158px;
-
left: 100px;
-
}
-
No Comments