Transform hover effects

Whether you want to scale, rotate, translate and more your design, Vitamin has you covered. Our CSS transforms have been designed to work seamlessly with the rest of the framework, so you can easily customize the look and feel of your website with just a few lines of code.


How to use

Take your designs to the next level with Vitamin's hover CSS transforms! With just a few simple classes, you can now easily add hover animations to your website without any hassle. Simply add the -h suffix to your CSS transform classes, and watch your design come to life. for example .rotate-h-r-3 will rorate your div on hover.

Classes

Just add and -h after your transform property class and before the number.

  • .rotate-h
  • .scale-h
  • .translate-h
  • .perspective-h

Visual examples

Hover over the following iamges to see the effects

.rotate-r-90 vitamin example img
.scale-h-1 vitamin example img
.scale-h-n1 vitamin example img
.translate-h-b-2 vitamin example img
.translate-h-l-2 vitamin example img
.perspective-h-xy-n5 vitamin example img