Member Avatar for surferbloggy
surferbloggy 0 Newbie Poster

Hi, i'm using a css for a flip div effect on rollover it works but i like to revert the text
now it's from right to rotate and then i flip with this code on rollover

  -webkit-transform: translateX( 100% ) rotateY( -180deg );
         -moz-transform: translateX( 100% ) rotateY( -180deg );
           -o-transform: translateX( 100% ) rotateY( -180deg );
              transform: translateX( 100% ) rotateY( -180deg );

i'd like it works from rotated to right
but if i change the translateX and rotateY on normal state it doesn't work anymore how could i rotate and traslate on normal state and on rollover state to reverse it?
could you help me to fix it? thank you

  • 1 Contributor
  • 0 Replies
  • 120 Views

Dani AI

Generated

A simple way to "reverse" the flip so the element starts rotated and flips to upright on hover is to treat the visible faces as two stacked panels and rotate the inner wrapper between the two states. Key points: set a perspective on the outer container, use transform-style: preserve-3d on the inner element, hide mirrored text with backface-visibility: hidden, and put the transition on the element that actually receives the transform. As noticed, mixing translate and rotate can be confusing — try first with rotation-only and use transform-origin to change the pivot side.

Example structure and CSS (rotate initially so the back face shows, then reset on hover):

<div class="flip">
  <div class="flip-inner">
    <div class="front">Front</div>
    <div class="back">Back</div>
  </div>
</div>

.flip { perspective: 900px; width: 300px; height: 180px; }
.flip-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  transform-origin: right center;
  transform: rotateY(180deg); /* start flipped so .back is visible */
}
.flip-front, .flip-back {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  backface-visibility: hidden;
}
.flip-back { transform: rotateY(180deg); }
.flip:hover .flip-inner { transform: rotateY(0deg); }

Troubleshooting: ensure transition is on the same selector that gets transform (not only on :hover), make both faces absolutely positioned to overlap, and keep the transform function order consistent across states if you do combine translate and rotate (changing order can change the visual path). For vendor and behavior details see MDN: transform, MDN: transform-style, and MDN: backface-visibility.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.