Today we present you a collection of useful CSS3 tutorials.
Jun 15
May 11
Today we present a collection of best CSS3 and HTML5 tutorials for May 2011.
Apr 06
Mar 03
In this artile you will find interesting CSS3 tutorials for February 2011.
Jan 25
Dec 24
Today we presents collection of HTML5 and CSS3 tutorials for December 2010.
Nov 18
In this article you will find roundup of useful CSS3 tutorials for November 2010.
Oct 13
Oct 05
Over on my personal blog I talk about a 3D slide deck I’ve created that uses HTML5, CSS3, and a bit of SVG (video). The main idea behind this deck is to be able to ‘zoom’ into topics to as deep a level as necessary. Slides are nested, like an outline.
For example, I gave a talk at Future of Web Apps recently on HTML5, CSS3, and other web technologies and only had 40 minutes, so I just skimmed the surface of the slides. However, in a few days I’ll be speaking at Fronteers and will be diving deep into SVG and Canvas, so those slides can be zoomed into. The goal is for me to have a universal slide deck that can ‘accordian’ open and closed to fill either a 40 minute session or an all day workshop, kind of like stretchtext.
Read more to learn about the 3D slide deck and how I built it.
Sep 14
Sep 13
I’ve been doing alot of experimenting with HTML5/CSS3 on the iPhone doing animation, and I’ve been surprised with the low frame rate of animating through Canvas or SVG. If you are trying to do animation, especially 3D, on the iPhone it seems like the name of the game is to it through the GPU, and the only way to do that these days on iOS is CSS3 Animations/Transitions/3D.
These experiments caused me to stumble on Paul Hayes interesting work simulating a 3D animated cube using CSS3, hence they happen on the GPU on the iPhone/iPad and are quite fast:
A 3D cube can be created solely in CSS, with all six faces. Using JavaScript to detect key presses and update inline styles this cube can be intuitively navigated.
Paul achieves this by having each face of the cube be a unique DIV, each with a ‘face’ class and inside of a larger ‘cube’ class all wrapped by an ‘experiment’ class:
HTML:
<div id=“experiment”>
<div id=“cube”>
<div class=“face one”>
One face
</div>
<div class=“face two”>
Up, down, left, right
</div>
<div class=“face three”>
Lorem ipsum.
</div>
<div class=“face four”>
New forms of navigation are fun.
</div>
<div class=“face five”>
Rotating 3D cube
</div>
<div class=“face six”>
More content
</div>
</div>
</div>
<div id=“cube”>
<div class=“face one”>
One face
</div>
<div class=“face two”>
Up, down, left, right
</div>
<div class=“face three”>
Lorem ipsum.
</div>
<div class=“face four”>
New forms of navigation are fun.
</div>
<div class=“face five”>
Rotating 3D cube
</div>
<div class=“face six”>
More content
</div>
</div>
</div>
The outer wrapper is the camera and allows you to apply perspective and where you want the perspective origin to be:
CSS:
#experiment {
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 200px;
}
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 200px;
}
The #cube itself is given a size, CSS transition properties so things will animate nicely, and an instruction to preserve 3D children and not ‘flatten’ them:
CSS:
#cube {
position: relative;
margin: 0 auto;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
}
position: relative;
margin: 0 auto;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
}
Each of the faces is given some common styling:
CSS:
.face {
position: absolute;
height: 360px;
width: 360px;
padding: 20px;
background-color: rgba(50, 50, 50, 0.7);
}
position: absolute;
height: 360px;
width: 360px;
padding: 20px;
background-color: rgba(50, 50, 50, 0.7);
}
The individual face DIVs are then rotated and translated in 3D space into their correct positions:
CSS:
#cube .one {
-webkit-transform: rotateX(90deg) translateZ(200px);
}
-webkit-transform: rotateX(90deg) translateZ(200px);
}
#cube .two {
-webkit-transform: translateZ(200px);
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(200px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(200px);
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(200px);
}
#cube .six {
-webkit-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
}
