CODEWITHSUNDEEP
htmlcss
Nadia
Nadia

Reputation: 11

How can I activate a rotate on a click instead of hover is css

I am very new at this. I have three boxes with information on both sides. They currently rotate on hover but I would like them to only rotate on click. How do I accomplish this?

.flip3D {
  width: 240px;
  height: 200px;
  margin: 10px;
  float: left;
}

.flip3D>.front {
  position: absolute;
  -webkit-transform: perspective( 600px) rotateY( 0deg);
  transform: perspective( 600px) rotateY( 0deg);
  background: #FC0;
  width: 240px;
  height: 200px;
  border-radius: 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}

.flip3D>.back {
  position: absolute;
  -webkit-transform: perspective( 600px) rotateY( 180deg);
  transform: perspective( 600px) rotateY( 180deg);
  background: #80BFFF;
  width: 240px;
  height: 200px;
  border-radius: 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}

.flip3D:hover>.front {
  -webkit-transform: perspective( 600px) rotateY( -180deg);
  transform: perspective( 600px) rotateY( -180deg);
}

.flip3D:hover>.back {
  -webkit-transform: perspective( 600px) rotateY( 0deg);
  transform: perspective( 600px) rotateY( 0deg);
}
<div class="flip3D">
  <div class="back">Box 1 - Back</div>
  <div class="front">Box 1 - Front</div>
</div>

Upvotes: 1

Views: 111

Answers (2)

Julio Feferman
Julio Feferman

Reputation: 2676

You can use :active pseudo class. However, active is triggered on mousedown and untriggered on mouseup. Not sure this fits your requirements. If not, you may need to resort to a js solution with event handlers.

.flip3D {
  width: 240px;
  height: 200px;
  margin: 10px;
  float: left;
}

.flip3D>.front {
  position: absolute;
  -webkit-transform: perspective( 600px) rotateY( 0deg);
  transform: perspective( 600px) rotateY( 0deg);
  background: #FC0;
  width: 240px;
  height: 200px;
  border-radius: 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}

.flip3D>.back {
  position: absolute;
  -webkit-transform: perspective( 600px) rotateY( 180deg);
  transform: perspective( 600px) rotateY( 180deg);
  background: #80BFFF;
  width: 240px;
  height: 200px;
  border-radius: 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}

.flip3D:active>.front {
  -webkit-transform: perspective( 600px) rotateY( -180deg);
  transform: perspective( 600px) rotateY( -180deg);
}

.flip3D:active>.back {
  -webkit-transform: perspective( 600px) rotateY( 0deg);
  transform: perspective( 600px) rotateY( 0deg);
}
<div class="flip3D">
  <div class="back">Box 1 - Back</div>
  <div class="front">Box 1 - Front</div>
</div>

Upvotes: 0

JDewitt
JDewitt

Reputation: 557

This would require a javascript click event listener. You will also need to update your CSS to change with the newly created class (.active) instead of on :hover.

var box = document.querySelector('.flip3D');

box.addEventListener("click", function() {
  if (box.classList.contains('active')) {
    box.classList.remove('active');
  } else {
    box.classList.add('active');
  }
});
.flip3D {
  width:240px;
  height:200px;
  margin:10px;
  float:left;
}

.flip3D .front{
 position:absolute;
 -webkit-transform: perspective( 600px ) rotateY( 0deg );
 transform: perspective( 600px ) rotateY( 0deg );
 background:#FC0; width:240px; height:200px; border-radius: 7px;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 transition: -webkit-transform .5s linear 0s;
 transition: transform .5s linear 0s;
}

.flip3D .back{
 position:absolute;
 -webkit-transform: perspective( 600px ) rotateY( 180deg );
 transform: perspective( 600px ) rotateY( 180deg );
 background: #80BFFF; width:240px; height:200px; border-radius: 7px;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 transition: -webkit-transform .5s linear 0s;
 transition: transform .5s linear 0s;
}

.flip3D.active .front{
 -webkit-transform: perspective( 600px ) rotateY( -180deg );
 transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D.active .back{
 -webkit-transform: perspective( 600px ) rotateY( 0deg );
 transform: perspective( 600px ) rotateY( 0deg );
}
<div class="flip3D">
  <div class="back">Box 1 - Back</div>
  <div class="front">Box 1 - Front</div>
</div>

Upvotes: 3

Related Questions