How do I make a 3D Transform flip while retaining it's look?

Design help General
1

Hello all! It’s been a while. And I love Webflow even more :clap:

I was doing some cleaning up on my portfolio website and I wanted to make the rotating project section say (for example) “OKC” even after flipping. Usually it will flip and say “CKO” since it flipped. Any way to do this?

Preview: https://preview.webflow.com/preview/minewire?preview=0c8365cbc8486679430c98a2c0e8dc86
Live: http://www.minewiredesign.com

2

Hey Dude, I think there are two possibilities (at least :wink: ):

  1. add a second copy the element that is now turning. Give your duplicate element a new name and change the letters to CKO. Create a wrapper div for both your elements and set them both to position:absolute, so they are on top of each other. Take your new element add a transform 180degrees and hide its back-face. Lastly, reapply your rotation from your first element to the wrapper instead and there you are.
    BTW its very well explained here:
    https://help.webflow.com/video-tutorial/card-flip-animation-using-3d-transforms

  2. split your element in three parts, one for each letter. and add a rotation to each of it that is based on the same trigger as your first interaction. Should look good.

Personally, I’d like to see the second version. but up to you :smiley:

3

Thank you for the assistance!! I’ve got it to work now by adding an infinite 0MS loop of the face button to 180 degrees.

However now, the line goes through the button, so I have to fix that now.

4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.