Amazing super casino bonuses await online gambling enthusiasts who register with Casino770, joint hem and win your fortune too!
The Ashes
Technology, Science and other news
June 27, 2009
Fun with 3D CSS and video
Filed under : General
How about starting the week with something fun. Zach Johnson has been having fun with 3D effects via CSS such as his isocube above, which is brought to you with simple HTML (including a video tag for a playing video on the surface!) and some CSS like this:
CSS:
-
-
.face {
-
position: absolute;
-
width: 200px;
-
height: 200px;
-
overflow: hidden;
-
font-family: monospace;
-
font-size: 24px;
-
}
-
-
.top {
-
top: 0;
-
left: 89px;
-
background: #fff;
-
color: #999;
-
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
-
}
-
-
.left {
-
top: 155px;
-
left: 0;
-
background: #999;
-
color: #333;
-
-webkit-transform: rotate(15deg) skew(15deg, 15deg);
-
-moz-transform: rotate(15deg) skew(15deg, 15deg);
-
}
-
-
.right {
-
top: 155px;
-
left: 178px;
-
background: #ccc;
-
color: #666;
-
-webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
-
-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
-
}
-
-
.shadow {
-
top: 310px;
-
left: -89px;
-
background: black;
-
opacity: 0.5;
-
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
-
}
-
Chris Blizzard posted his Open Video Conf talk on connecting HTML5 video showcasing the great demos of Paul Rouget 
Tags :
No Comments