View difference between Paste ID: <a href="/2nbzftYq">2nbzftYq</a> and <a href="/HXXUkXbt">HXXUkXbt</a>

View difference between Paste ID: 2nbzftYq and HXXUkXbt

SHOW: | | - or go back to the newest paste.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Card flip</title>
  <style>
    *{
      margin:0;
      padding:0;
    }

    .card {
      margin: 100px auto 0;
      width: 400px;
      height: 600px;
      perspective: 1200px;
    }

    .card_inner{
      width:100%;
      height:100%;
      transition: transform 1s;
      transform-style: preserve-3d;
      position:relative;
    }

    .card_inner.is-flipped{
      transform: rotateY(180deg);
    }

    .card_face{
      position:absolute;
      width:100%;
      height:100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      overflow: hidden;
      border-radius: 16px;
      box-shadow: 0 3px 18px 3px rgba(0,0,0,.2);
    }

    .card_face--front{
      background-color:orange;
      display:flex;
      align-items: center;
      justify-content: center;
    }

    .card_face--back{
      background-color:yellow;
      display:flex;
      align-items: center;
      justify-content: center;
      transform: rotateY(180deg);
    }
    
    button{
      padding:.4em;
      cursor:pointer;
    }
  </style>
</head>
<body>
  
  <div class="card">
    <div class="card_inner">
      <div class="card_face card_face--front">
        <h2>FRONT</h2>
        <button class="button">BACK</button>
      </div>
      <div class="card_face card_face--back">
        <h2>BACK</h2>
    card.addEventListener('click', function () {
        <button class="button">FRONT</button>
      card.classList.toggle('is-flipped');

    })

  </div>

  <script>
    const card = document.querySelector('.card_inner');
    const buttons = document.getElementsByClassName('button');
    Array.from(buttons).forEach(function(button) {
      button.addEventListener('click', function () {
        card.classList.toggle('is-flipped');
      })
    });
  </script>
  
</body>
</html>

1		<!DOCTYPE html>
2		<html>
3		<head>
4		<meta charset="utf-8">
5		<meta name="viewport" content="width=device-width">
6		<title>Card flip</title>
7		<style>
8		*{
9		margin:0;
10		padding:0;
11		}
12
13		.card {
14		margin: 100px auto 0;
15		width: 400px;
16		height: 600px;
17		perspective: 1200px;
18		}
19
20		.card_inner{
21		width:100%;
22		height:100%;
23		transition: transform 1s;
24		transform-style: preserve-3d;
25		position:relative;
26		}
27
28		.card_inner.is-flipped{
29		transform: rotateY(180deg);
30		}
31
32		.card_face{
33		position:absolute;
34		width:100%;
35		height:100%;
36		-webkit-backface-visibility: hidden;
37		backface-visibility: hidden;
38		overflow: hidden;
39		border-radius: 16px;
40		box-shadow: 0 3px 18px 3px rgba(0,0,0,.2);
41		}
42
43		.card_face--front{
44		background-color:orange;
45		display:flex;
46		align-items: center;
47		justify-content: center;
48		}
49
50		.card_face--back{
51		background-color:yellow;
52		display:flex;
53		align-items: center;
54		justify-content: center;
55		transform: rotateY(180deg);
56		}
57
58		button{
59		padding:.4em;
60		cursor:pointer;
61		}
62		</style>
63		</head>
64		<body>
65
66		<div class="card">
67		<div class="card_inner">
68		<div class="card_face card_face--front">
69		<h2>FRONT</h2>
70		<button class="button">BACK</button>
71		</div>
72		<div class="card_face card_face--back">
73		<h2>BACK</h2>
74	-	card.addEventListener('click', function () {
74	+	<button class="button">FRONT</button>
75	-	card.classList.toggle('is-flipped');
75	+
76	-	})
76	+
77		</div>
78
79		<script>
80		const card = document.querySelector('.card_inner');
81		const buttons = document.getElementsByClassName('button');
82		Array.from(buttons).forEach(function(button) {
83		button.addEventListener('click', function () {
84		card.classList.toggle('is-flipped');
85		})
86		});
87		</script>
88
89		</body>
90		</html>