Universal CSS Transforms: Flip Support

Next Generation Web Effects!

Got bored of your flat web pages and want some cool 3D flipping effects?  Meet the Universal CSS Transforms: Flip! This effect will allow you to flip any image or HTML content in an amazing 3D with a different one on its back! All with just CSS and jQuery - fully cross browser compatible! Control the flip animation by giving it speed and easing effect. Now you can finally create stunning animation effects without any Flash!


  • Flip any HTML element - Choose the type and apply it to any image, text or div container.


  • Flip Types - You can choose whether to flip your image, text or div container by the X and Y axis, as well as to simulate a 3D Effect(an isometric 3D flip). Click on the image below to see in action.
  • Flip Animation - Set the animation by giving it speed and easing effect.

  • Back Flip source - Set additional source for the back of your image, HTML element or div container. For images, define a different image source for the back side and a css selector to the element that contains the back HTML for other HTML elements.

  • Callbacks(optional) - onFlip Callback function is executed at the moment of fliping and onComplete Callback at the end of the animation.

  • Preserve orientation - When fliping the backside has the same orientation as the front.
  • Ignoring animated elements - When using hoover behaviors it will skip the element that is currently animated.
  • Pure CSS based - No Flash required! 
  • Fully cross browser compatible - The Universal CSS Transforms: Flip is a jQuery based, build only with HTML & CSS - no Flash what so ever! It even supports IE6 next to the other major browsers.
  • Search engine friendly – The Universal CSS Transforms: Flip is pure HTML and CSS based and generates search engine friendly HTML code that can be nicely indexed by all search engines and web spiders.



Features Overview of Universal CSS Transforms: Flip
With this movie we will show you the features packed in the Universal CSS Transforms: Flip and how to use them.



Type: Behavior
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CC+
Platform: Win XP/2000/2003/2008/7, Mac OS X
Used Technologies: jQuery, CSS, JavaScript


Version 1.5.0

  • Full compatibility with HTML5 Data Bindings
  • Improved compatibility with Dreamweaver CC 2015

Version 1.1.2

  • Full Dreamweaver CC and Extension Manager CC support
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility

Version 1.1.1

  • Latest jQuery 1.6.3 included

Version 1.1.0

  • Optimized CSS Transforms in all IE browsers
  • Special support for IE9 and its own CSS Transforms support
  • jQuery 1.4+ compatibility
  • Improved shared file copy and link process
  • Improved compatibility with Dreamweaver Templates

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. The most popular for its over high-quality Dreamweaver extensions and templates.

George is also the founder of Wappler.io - the most Advanced Web & App Builder

See All Postings From George Petrov >>


Be the first to write a review

You must me logged in to write a review.