How to write CSS in JS?

Question

I wanted to make a Memory Game. I want to write an CSS animation for the flip in JS so I can then call a function, because I wanted to make a onclick anmation an not an hover animation.

how do I make a CSS flip animation with an oncklicked Function in Javascript?

var card = "<div class='flip-card'><div class='flip-card-inner'><div class='flip-card-front'><button id='button'onclick='Flipfront()'style='width:300px;height:300px; marign:50px; background-image:url(Frontpage.jpg);'></button></div><div class='flip-card-back'><button id='button2' onclick='Flipback()'style='width:300px;height:300px; marign:50px; background-image:url(IMG1.jpg);'></button></div></div></div>"

for (let i = 0; i < 20; i++) {
  document.querySelector("#container").innerHTML += card;
}

function Flipfront() { 
  // ?
}

function Flipback() { 
  // ?
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}


/* This container is needed to position the front and back side */

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}


/* Do an horizontal flip when you move the mouse over the flip box container */

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}


/* Position the front and back side */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}


/* Style the front side (fallback if image is missing) */

.flip-card-front {
  background-color: #bbb;
  color: black;
}


/* Style the back side */

.flip-card-back {
  transform: rotateY(180deg);
}

<div id="outerbackground">
  <img src="background.jpg" class="backgorund" border="1" id="BG">
</div>
<div id="container"></div>

Use JS to toggle a class that turns the card around.

Terry
– Terry

2020-03-24 19:47:37 +00:00
Commented Mar 24, 2020 at 19:47 — Terry
– Terry, Commented Mar 24, 2020 at 19:47
@Terry that is my Idea, but what do I wirte in the class ?

bgt0123
– bgt0123

2020-03-24 19:53:32 +00:00
Commented Mar 24, 2020 at 19:53 — bgt0123
– bgt0123, Commented Mar 24, 2020 at 19:53

Terry · Accepted Answer · 2020-03-24 19:51:24Z

To further elabourate on my comment: instead of using :hover, you can use a class, say .flipped instead, to control the flipped state of the card.

Then, in the Flipfront() and Flipback() methods, make sure you accept an argument that will be passed in from your markup, which will be invoked as Flipfront(this) or Flipback(this). This will allow you to access the element that triggered it.

Then, simply use Element.closest() to access the .flip-card parent, and use Element.classList.add() or Element.classList.remove() to toggle the flipped class:

var card = "<div class='flip-card'><div class='flip-card-inner'><div class='flip-card-front'><button id='button'onclick='Flipfront(this)'style='width:300px;height:300px; marign:50px; background-image:url(Frontpage.jpg);'></button></div><div class='flip-card-back'><button id='button2' onclick='Flipback(this)'style='width:300px;height:300px; marign:50px; background-image:url(IMG1.jpg);'></button></div></div></div>"

for (let i = 0; i < 20; i++) {
  document.querySelector("#container").innerHTML += card;
}

function Flipfront(el) { 
  el.closest('.flip-card').classList.add('flipped');
}

function Flipback(el) { 
  el.closest('.flip-card').classList.remove('flipped');
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}


/* This container is needed to position the front and back side */

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}


/* Do an horizontal flip when you move the mouse over the flip box container */

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}


/* Position the front and back side */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}


/* Style the front side (fallback if image is missing) */

.flip-card-front {
  background-color: #bbb;
  color: black;
}


/* Style the back side */

.flip-card-back {
  transform: rotateY(180deg);
}

<div id="outerbackground">
  <img src="background.jpg" class="backgorund" border="1" id="BG">
</div>
<div id="container"></div>

Madhav Sharma · Accepted Answer · 2020-03-24 19:52:54Z

1

Have you tried dynamically changing classes on click? When the element is clicked, you can add the class .flip-card-inner and remove '.flip-card-front` by using the classlist property and its methods

Usage is:

elem.classList.add("flip-card-inner");

elem.classList.remove("flip-card-front");

answered Mar 24, 2020 at 19:52

Madhav Sharma

1407 bronze badges

Comments

Rory McCrossan · Accepted Answer · 2020-03-24 19:53:08Z

Don't write CSS in JS. Instead simply change the :hover rule to depend on a class which you toggle when each .flip-card is clicked.

Also note that you should not be using onX attributes as they are outdated and bad practice due to violating the separation of concerns principle. Instead use unobtrusive event handlers. The same is also true for inline style attributes. Move those rules in to an external stylesheet. Here's a working example:

let card = '<div class="flip-card"><div class="flip-card-inner"><div class="flip-card-front"><button id="button"></button></div><div class="flip-card-back"><button id="button2"></button></div></div></div>';
for (let i = 0; i < 20; i++) {
  document.querySelector("#container").innerHTML += card;
}

document.querySelectorAll('.flip-card').forEach(el => {
  el.addEventListener('click', () => el.classList.toggle('flipped'));
});

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* remove :hover here */
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  transform: rotateY(180deg);
}

#button {
  width: 300px;
  height: 300px;
  background-image: url(Frontpage.jpg);
}

#button2 {
  width: 300px;
  height: 300px;
  background-image: url(IMG1.jpg);
}

<div id="outerbackground">
  <img src="background.jpg" class="backgorund" border="1" id="BG">
</div>
<div id="container"></div>

Collectives™ on Stack Overflow

How to write CSS in JS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related