logo
down
shadow

CSS Flip animation on click


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 : facebook icon twitter icon
how to change css for flip animation on button click?

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

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

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

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;
  }
}
CSS3 - 3D Card flip animation without using click events

CSS3 - 3D Card flip animation without using click events


By : Nicolás Alejandro Cu
Date : March 29 2020, 07:55 AM
this one helps. You can do this with css-transitions and no Javascript at all. Using :target css attribute to detect the state of the card
CSS
Related Posts Related Posts :
  • Append blade file to jquery function
  • NodeJS TypeError: Cannot read property of undefined
  • Using ng-if to check angular variable from another directive in angularjs
  • Replacing [b][/b] to apply BOLD text on a DIV
  • Bootstrap-select, behavior like SO tags field
  • Class name changing dynamically from JSON object in Angular.js
  • to add button which will redirect to View Page of current row in JQGrid
  • firebaseAuth GoogleAuthProvider() signInWithRedirect
  • AngularJS 1 Restangular GET stripping #
  • How can I do column move in ui-grid on tap & hold?
  • How to track a javascript function?
  • Chart.JS: How to add Data to a specific dataset
  • Accessing 'this' inside the callback should reference my array
  • get empty request while posting
  • How to hide element if filter returns null angularjs
  • Popups for checking/unchecking a checkbox
  • Loop event click jquery synchronize current status
  • "Export to excel" button kendogrid download more than 1 file
  • Load bootstrap forms from select page
  • Using Vue with django
  • JS Outputting a form value receives 'undefined' in console
  • Why do enzyme not find 'tr' in a table?
  • Inject GET parameter to target URL of a button, on click
  • tags in JS and css counter increment
  • Post "url-from' in a form
  • TypeError: $(...).magnificPopup is not a function
  • .toggleclass and .slidetoggle don't work
  • user agent for windows 7 vs 8 vs 10
  • How to write (A or B or C) followed by X in JavaScript regex?
  • Ember template convention
  • Sum multiple objects in multiple arrays and then average sums
  • Append a list to ul
  • React router Link; activeClassName not working
  • Site Overlay not working "Uncaught ReferenceError: closeNav is not defined"
  • How to require Stateless Functional Components (Unknown module _createWrapper?)
  • Binding a field state (disabled or hidden) according to different selected values in a combobox
  • stomp+ActiveMQ with SSL
  • creating an expression that acts like a .contains
  • Showcase the first n-items in a bootstrap grid
  • Background colour fade on carousel
  • Extend prototype using decorator
  • In react router v4 how does one link to a fragment identifier?
  • How to send local storage data with ajax to php page?
  • Javascript not working after publish to IIS
  • Remove GMT+530(Indian standard Time) without changing current time in javascript
  • Javascript: Syntax creating private object properties
  • how to make the table not having <thead> header fixed
  • ng-init with condition statements
  • javascript change height based on element's height
  • How to improve performance when loading CSV file into html table with javascript and ajax?
  • Javascript for rounding down in a finance calculator
  • .htaccess file rules are disturbing the menubar layout when window goes on mobile view
  • Angular 1.5 Option with ng-change
  • Angular Trix not working in all browsers
  • Vue.js add property to bound object
  • Push item with interfaces on typescript
  • jQuery on click event firing multiple times
  • Add first three elements of array in javascript
  • HTML5 video Uncaught TypeError: .play is not a function
  • Manipulate java List<Object> in Jquery
  • shadow
    Privacy Policy - Terms - Contact Us © soohba.com