- Paolo: I hope you’ll try this other game, KABOOM, a spaceship browsergame.
- ralph: Thats pretty cool.
- Sean P. Aune: Glad you enjoyed the post:) Yes, it was a ton of work, but well worth it!
- alpha: Thanks for the inclusion!
- Wesam Saif: This is very similar to the NoGray Color Picker http://www.nogray.com/color_pi cker.php
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
- June 2007
Webkit CSS Transforms
Webkit now has CSS Transforms:
Boxes can be scaled, rotated, skewed and translated. The current nightly builds support affine transformations.
A transform can be specified using the -webkit-transform property. It supports a list of functions, where each single function represents a transform operation to apply. You can chain together operations to apply multiple transforms at once to an object (e.g., if you want to both scale and rotate a box).
At the moment transforms do not affect layout, so they are similar to relative positioning in that respect. We are exploring ideas for how to do transforms in ways that could affect layout.
Michael Daines got to work and created the following example that makes the logo bump and grind using this JavaScript:
-
-
HilariousWebkitTransform = {
-
angle: 0,
-
scale: 1,
-
scaleFactor: 1.01,
-
image: document.getElementById(“gold-webkit-icon-in-box”),
-
-
animate: function() {
-
this.angle += 1;
-
this.scale *= this.scaleFactor;
-
-
if (this.scale> 2)
-
this.scaleFactor = 0.99;
-
-
if (this.scale <1)
-
this.scaleFactor = 1.01;
-
-
if (this.angle> 360)
-
this.angle = 1;
-
-
this.image.style.webkitTransform = ‘rotate(’ + this.angle + ‘deg) scale(’+ this.scale + ‘)’;
-
}
-
}
-
-
setInterval(function() { HilariousWebkitTransform.animate(); }, 10);
-
Read more on the source site
No comments yet.
feel free to leave a comment
Comment Guidelines: Basic XHTML is allowed (a href, strong, em, code). All line breaks and paragraphs are automatically generated. Off-topic or inappropriate comments will be edited or deleted. Email addresses will never be published. Keep it PG-13 people!
XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
All fields marked with " * " are required.
