Friday, July 17th, 2009
More on 3D CSS Transforms
Following up on the earlier coverage we are back with more info on 3D transforms. Simon Fraser has posted details on the WebKit blog.
He shows off a couple of cool examples:
The post goes into detail on the new CSS such as:
CSS:
-
-
translate3d(x, y, z), translateZ(z)
-
-
scale3d(sx, sy, sz), scaleZ(sz)
-
-
rotateX(angle), rotateY(angle), rotate3d(x, y, z, angle),
-
-
perspective(p)
-
-webkit-transform: perspective(500px) rotateY(20deg);
-
-
matrix3d(…)
-
-
-webkit-transform-origin now accepts three values, allowing you to specify a z offset for the transform origin.
-
-
-webkit-perspective
-
-
-webkit-backface-visibility
-
Jay Sparks has also been playing with these properties as he built a 3D draggable cube.
5 rating from 18 votes
Very nice!
This sample has been around for a long time. its been posted on the non public apple developer site. If you have an apple developers account there are a real lot of webkit transform samples, Apple has done a really good job putting together a nice sample site for paid developers.
Apple is NOT going to be happy until the whole functionality of Quartz Composer is possible in Webkit!
And why is that bad…
I love tranformations , I use them all the time.
Apple follows standards, they may influence but they are not driving the htm 5 effort, which is what all this is part of.
Take the transformation above, apple posted that on the developer site last year.. (or at least something really similar) with 4 rotating ringes, gyrating around x, y, z axis. kind of useless. But I’ve created a proof of concept using dashcode of a photo album based on the rotating rings, each little square is a photo or document , clicking on it calls another transform which shows the full image or document.
If I can find the project file I will post a link.
With the changing trend of the world, wedding apart from white,Princess Strapless Satin Evening Dress ivory, beige and other traditional colors,are also increasingly popular in recent years, ghetto prom dressespink wedding package,gothic prom dresses such as pink, pink orange, baby blue, purple night, light green and light silver-gray, very soft and pleasing to wedding hair accessoriesthe eye; if you have the courage to try, dark green, purplish red, deep purple, decorated in pink wedding dress, the formation of rich colors,the dress, the effect is very special;Sash Lace Satin Flower Girl Dress, laden with flour colored silk flowers, butterflies, in order to add color.wedding dressIn fact, the wedding is the color of lesser importance, the most important prerequisite is to match the bride’s complexion. Oriental deep and yellowish color, wearing white Mermaid Satin Organdie Wedding Dress,will appear dull, wearing ivory would be more harmonious and natural, baby blue, wedding accessoriespurple night can not be coordinated with the yellow, but pink orange, light green with yellowish color match. As for the skin and rosy, or bronze skin, wearing white will look great, wedding dress