- Topics:
- apps
- css
- games
- javascript
- mobile
- node
- php
- speaking
- tehcl
- textmate
- tools
- video
- webgl
Topic: tools
- published:
- 2009.03.11
- topics:
- css
- javascript
- tools
Rotate3Di is a jQuery Effect Plugin that makes it possible to do an isometric 3D flip or 3D rotation of any HTML content. It also enables custom 3D rotation animations. CSS Transforms are used to create this visual "3D" isometric effect. Supported browsers are Safari, Chrome, Webkit, Firefox 3.5+, IE9+, and Opera 11+. The plugin's functionality includes: setting or animating HTML content to an arbitrary isometric rotation angle, as well as flipping, unflipping, or toggling the flip state of an object.
- published:
- 2009.03.11
- topics:
- css
- javascript
- tools
One of the things I've been spending quite a bit of time on lately has been my new project: rotate3Di, an effect plugin for jQuery. This plugin enables "3D" isometric perspective rotation and animation via CSS transformations. I'm happy to announce the release of version 0.9 today.
Rotate3Di Project
This plugin is somewhat ahead of its time. Not in the sense that I am any sort of visionary, but in the fact that I didn't wait for Firefox 3.1 to be in wide use. Because I've chosen to use native CSS transformations to produce the visual effect, you will currently only see the "3D" perspective using WebKit/Safari or Firefox 3.1 beta. (Update: Supported now in Safari, Chrome, Firefox 3.5+, IE9+, and Opera)
Firefox 3.0 and Internet Explorer are not presently supported, but it does seem within the realm of possibility using SVG and proprietary IE CSS Filters. Though, having gone down this road in IE once before, I will say the behavior is quite different due to element clipping/resizing, a different transform origin, and speed issues.
When the true full 3D perspective transformations move from iPhone Mobile Safari into the desktop WebKit/Safari, I will introduce support for those effects into this plugin as well.
Basic usage of this plugin is very similar to the jQuery animate() method. A usage example and more on what I learned from this project, including jQuery's custom animation system, after the jump.
- published:
- 2009.02.02
- topics:
- javascript
- tools
When it comes to picking a width for my web designs, what I really want to know are the common browser window dimensions for a visitor. Google Analytics tracks screen resolution, but this is increasingly meaningless with the rising popularity of super high resolution wide screen monitors. Most websites these days are 1024 pixels wide or less, thus my browser window is generally about 1000 pixels wide. Every so often I visit a website that is setup for a 1280 pixel wide screen, and even though my widescreen monitor is much higher resolution than this, it really annoys me to resize my browser window. I don't want to hassle my visitors by being the only website they visit that forces them to resize. I will show you how to track the browser window dimensions (actually, the inner window viewport dimensions) for your visitors in Google Analytics. Update: Thanks to Paul for giving me a kick in the rear to fix a bug with listening to resize events.
- published:
- 2008.11.19
- topics:
- textmate
- tools
A TextMate Theme optimized for web developers. This theme assigns a separate set of color rules and subtle background shading for code, markup, and styles so the developer can quickly and easily differentiate between them visually.
