CSS Flip animation on click

» javascript » CSS Flip animation on click

By : behzad hossieni

Date : November 28 2020, 11:01 PM

Hope that helps https://jsfiddle.net/pf4aemn7/ HTML

code :

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      1
    </div>
    <div class="back">
      2
    </div>
  </div>
</div>

.flip-container {
  perspective: 1000px;
}

.flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
  width: 320px;
  height: 480px;
}
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  z-index: 2;
  transform: rotateY(0deg);
}
.back {
  transform: rotateY(180deg);
}

$(document).on("click", ".flip-container", function () {
    $(this).toggleClass('hover');
});

Share :

how to change css for flip animation on button click?

By : ayodya bavika

Date : March 29 2020, 07:55 AM

around this issue I updated your jsFiddle. I removed the hover effect and replaced it with a call to a function, which toggles class rotated on .flip3D every time the button #rotateButton is clicked.

code :

$(document).ready(function() {
    $("#rotateButton").click(function() {
        $(".flip3D").toggleClass("rotated");
    });
});

.flip3D.rotated > .container2{
    -webkit-transform: perspective( 600px ) rotateY( -180deg );
    transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D.rotated > .container1{
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
}

jQuery div flip animation on click with CSS and SASS not flipping correctly

By : Costin Onciu

Date : March 29 2020, 07:55 AM

Does that help While trying to create a flip effect with both the front and back elements rotating, you should always rotate both the elements for every flip action.
The direction of the flip (or the rotation angle) depends on whether the back or the front is clicked.

code :

$(document).ready(function() {

  $(".flip3D").on('click', function() {

    if ($(this).attr('data-click-state') == 1) {
      $(this).attr('data-click-state', 0)
      frontFlip();
    } else {
      $(this).attr('data-click-state', 1)
      backFlip();
    }
  });

});

function frontFlip() {
  $(".front")
    .css('transform', 'perspective(600px) rotateY(0deg)')
  $(".back")
    .css('transform', 'perspective(600px) rotateY(180deg)')
}

function backFlip() {
  $(".back")
    .css('transform', 'perspective(600px) rotateY(0)')
  $(".front")
    .css('transform', 'perspective(600px) rotateY(-180deg)')
}

.flip3D .front {
  position: absolute;
  transform: perspective(600px) rotateY(0deg);
  background: sandybrown;
  width: 240px;
  height: 200px;
  border-radius: 7px;
  backface-visibility: hidden;
  transition: transform .5s linear 0s;
}
.flip3D .back {
  position: absolute;
  transform: perspective(600px) rotateY(180deg);
  background: aqua;
  width: 240px;
  height: 200px;
  border-radius: 7px;
  backface-visibility: hidden;
  transition: transform .5s linear 0s;
}
.flip3D {
  width: 0;
  height: 0;
  margin: 10px;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip3D">
  <div class="front">Front Box</div>
  <div class="back">Back Box</div>
</div>

CSS Flip Animation reset on every click

By : Mr.GameofCodes

Date : March 29 2020, 07:55 AM

around this issue Okay, I finally got this working so that every time the button is clicked the card opens from right to left. It took a combination of @Jamie D's idea above about removing and re-adding classes with the idea of using a jQuery function with a timer that automatically reclicks the button.
Solution can be seen on codepen here: https://codepen.io/Chris_Nielsen/pen/LdWPPG

code :

var card = document.querySelector("#errorMessage");
var container = document.querySelector('.flip-container');
var isOpen = false;

function showCard() {
  if (!isOpen) {
    container.style.visibility = "visible";
    card.classList.add("flip");
    document.querySelector(".flipper").classList.toggle("flip");
    isOpen = true;
  } else if (isOpen) { 
    card.classList.toggle("flip");
    isOpen = false;
    clickAgain();
  }
}

function clickAgain(){
  setTimeout(function() {
    $(document).ready(function(){
      $("#b1").click()
    });
  }, 350);
}

body {
  background: #575955;
  color: white;
}
.error-box {
  width: 380px;
  height: 110px;
  background: #fff;
  border: solid 1px #B71C1C;
  border-radius: 9px;
  font-family: 'Raleway', sans-serif;
  font-size: 1.6rem;
  color: #B71C1C;
  text-align: center;
  padding: 30px;
}

/* Hide the flip container to start */
.flip-container {
	perspective: 1000px;
  visibility: hidden;
}
.flip-container.flip .flipper {
  transform: rotateY(90deg);
  transition: 0.35s;
}

.flip-container, .front, .back {
	width: 320px;
	height: 200px;
}

/* flip speed goes here */
.flipper {
	transition: 0s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(-90deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(90deg);
/*   transform: rotateY(180deg); */
}

<h1>Click the button below to see the <br>animated alert.</h1>
<div class="flip-container" id="errorMessage" >
  <div class="flipper">
   <!-- text here will rotate --> 
		<div class="front">
			<!-- front content --> 
      <div class="error-box">
      Email address or password <br>
      Incorrect. <br>
      Please Try Again.
      </div>      
		</div>
		<div class="back">
			<!-- back content -->
		</div>
	</div>      
</div>
<input type="button" id="b1" value="Show card" onClick="showCard();">

Flutter - Flip animation - Flip a card over its right or left side based on the tap's location

By : arul

Date : March 29 2020, 07:55 AM

fixed the issue. Will look into that further You should know when you tap on the right or left to change the animations dynamically, for that you could use a flag isRightTap. Then, you should invert the values of the Tweens if it has to rotate to one side or to the other.
And the side you should rotate would be:

code :

_updateRotations(bool isRightTap) {
  setState(() {
    bool rotateToLeft = (isFrontVisible && !isRightTap) || !isFrontVisible && isRightTap;
    _frontRotation = TweenSequence(
      <TweenSequenceItem<double>>[
        TweenSequenceItem<double>(
          tween: Tween(begin: 0.0, end: rotateToLeft ? (pi / 2) : (-pi / 2))
              .chain(CurveTween(curve: Curves.linear)),
          weight: 50.0,
        ),
        TweenSequenceItem<double>(
          tween: ConstantTween<double>(rotateToLeft ? (-pi / 2) : (pi / 2)),
          weight: 50.0,
        ),
      ],
    ).animate(controller);
    _backRotation = TweenSequence(
      <TweenSequenceItem<double>>[
        TweenSequenceItem<double>(
          tween: ConstantTween<double>(rotateToLeft ? (pi / 2) : (-pi / 2)),
          weight: 50.0,
        ),
        TweenSequenceItem<double>(
          tween: Tween(begin: rotateToLeft ? (-pi / 2) : (pi / 2), end: 0.0)
              .chain(CurveTween(curve: Curves.linear)),
          weight: 50.0,
        ),
      ],
    ).animate(controller);
  });
}

@override
void initState() {
  super.initState();
  controller =
      AnimationController(duration: Duration(milliseconds: 500), vsync: this);
  _updateRotations(true);
}

void _leftRotation() {
  _toggleSide(false);
}

void _rightRotation() {
  _toggleSide(true);
}

void _toggleSide(bool isRightTap) {
  _updateRotations(isRightTap);
  if (isFrontVisible) {
    controller.forward();
    isFrontVisible = false;
  } else {
    controller.reverse();
    isFrontVisible = true;
  }
}