How to Add 2D Transformations (Using Custom CSS)

Hey all!

In this post, I show you how to add some 2D transformations to any element in your ClickFunnels using custom CSS so you can do something different as an affiliate marketer on this software! 🙂

These transformations are rotate, skew, translate (not language translation!), and scale.

Let’s go over each one separately and see how to plug them into your custom CSS editor.

– Rotate: pretty straightforward. This will rotate your element by as many degrees as you want to the left or right. You will need to input the command ‘transform:rotate(xxxdeg)’ for that element to rotate xxx amount of degrees. It rotates in a circle, so saying 330deg, or -30deg for example would give you the exact same result!

– Skew: this will skew the element along either the Y or X axis. You can specify which axis you want to be skewed by saying ‘transform:skew(YorXaxis)(xxxdeg)’. So either write Y or X at the end of it, and then plug in the number of degrees you want the element to be skewed by. Think of it as a rotation, but a rotation around an axis, not a point in the center.

– Scale: this will make your picture bigger or smaller than what it already is. Also a good way to increase the size of your picture if you find it is too small and can’t adjust it on ClickFunnels. Just type in ‘transform:scale(1.5)’ for example for your new element to be 1.5 times the size of the original. Alternatively, you can specify the scaling of exact height and width, so for example if you say ‘transform:scale(1.5, 2.0)’, this will scale your element to be 1.5 times the size of its original width, and 2 times its original height.

– Translate: this simply moves your element x amount of pixels to the right, and x amount down. By saying something like ‘transform:translate(10px, 10px)’, you are saying that you want the element to be moved 10 pixels to the right, and 10 pixels down. If you want to reverse the direction, simply add a negative sign at the beginning!

If you want to add hovering effects to these custom CSS transformations, simply add the following immediately following your element ID: ‘:hover’. This will make these transformations only show when you hover over that element!

If you want to make all these transformations come together, you need to write all the commands you want to take place on one line – DO NOT put them on separate lines separated by a semicolon, the LATEST declaration will OVERRIDE the previous ones in custom CSS! So if you want to add something like a translation, scale, skew, and rotate transformation all at once in your custom CSS, you can write this: ‘transform: translate(10px, 10px) scale(1.5) skewX(15deg) rotate(30deg);’. This will translate your element 10 pixels down and to the right, make it 1.5 times its original size, skew it along the X axis by 15 degrees, and rotate it clockwise by 30 degrees.

That’s it!

Please subscribe and stay tuned for future videos where go over the technical how-to’s and/or dig deeper into other affiliate marketing tools!

If you are interested in ClickFunnels, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
http://tinyurl.com/14-day-free-clickfunnels

If you like GetResponse and want to learn more, try out their 30-day free trial under my affiliate link at:
http://www.getresponse.com/index/Ambition

If you are interested in ClickMagick, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
http://www.bestlinktracker.com/ClickMagick/wp

Here is my Namecheap affiliate link as well if you want to buy one of their really cheap domains and/or private email:
https://www.namecheap.com/?aff=108439

Thanks for watching, and I’ll see you in the next video!

6 Replies to “How to Add 2D Transformations (Using Custom CSS)”

  1. Pingback: How to Add 3D Rotations (Using Custom CSS) – Affiliate Marketing Essentials

  2. Pingback: How to Add Transitions (Using Custom CSS) – Affiliate Marketing Essentials

  3. Pingback: How to Add Animations (Using Custom CSS) – Affiliate Marketing Essentials

  4. Pingback: How to Add a Simple Image Slider (Using Custom CSS) – Affiliate Marketing Essentials

Leave a Reply