Reproducing Codepen results (CSS Transforms)

Question

I was trying to implement this into a header on a page I'm putting together, but I had no luck getting it working. My hovers were working fine, as I tried another change on them (not the transform) and there were no issues there. But the transform itself doesn't do anything.

I couldn't figure out what was going on, so I just straight copy-pasted the HTML & CSS into a new file, and the hovers aren't working there either. What could be going wrong? It's working fine in my browser on CodePen, but not when copy/pasted out.

On codepen he's using prefix-free, maybe you need to include all prefixes? If you are unsure, paste your css into this website http://prefixr.com/ and then copy the result. — Albzi
– Albzi, Commented Oct 28, 2013 at 16:04

James Donnelly · Accepted Answer · 2013-10-28 16:06:26Z

1

In this particular example, Codepen has automatically applied vendor prefixes to certain CSS properties. In the case of transform, Chrome, Safari, Opera, and Android all require the -webkit- prefix and old versions of IE require the -ms- prefix (as listed here).

This means that where you're using properties like transform, transform-style, transform-origin, perspective and transition, you'll also need to implement the vendor prefixed versions.

For example:

.letter {
    ...
    transform-style: preserve-3d;
    ...
}

Will need to be changed to:

.letter {
    ...
    -webkit-transform-style: preserve-3d;
    -ms-style: preserve-3d;
    transform-style: preserve-3d;
    ...
}

answered Oct 28, 2013 at 16:06

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Albzi Over a year ago

Codepen doesn't automatically apply them, you need to enable them in settings and then they are automatically applied to your future pens. So the guy who created this obviously had that option on. :)

James Donnelly Over a year ago

@BeatAlex good shout! I've modified the beginning of my answer.

Albzi Over a year ago

Could tell that by you using 'good shout', you're British. Not relevant, but still awesome.

Collectives™ on Stack Overflow

Reproducing Codepen results (CSS Transforms)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related