CODEWITHSUNDEEP
javascriptcss
dashausdeshades
dashausdeshades

Reputation: 11

how can I make animation like in Stanford Majors page?

https://majors.stanford.edu/

I don't know if these things called animation but how can I make that turning thing when you click on majors?

I assume that I'm gonna need to use CSS Grid and JS.

Upvotes: 0

Views: 46

Answers (3)

Debs
Debs

Reputation: 341

In order to get a flip on click, please follow the below code.

var card = document.querySelector('.card');
card.addEventListener('click', function() {
  card.classList.toggle('is-flipped');
});
body {
  font-family: sans-serif;
}

.scene {
  width: 200px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 40px 0;
  perspective: 600px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face--front {
  background: #d96a51;
}

.card__face--back {
  background: #5c5ce3;
  transform: rotateY(180deg);
}
<div class="scene scene--card">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>
<p>Click card to flip.</p>

Upvotes: 1

Rohit.007
Rohit.007

Reputation: 3502

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

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

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

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

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
</style>
</head>
<body>

<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="https://majors.stanford.edu/sites/majors/files/styles/card_flipper/public/1_aa_ov-101-captiveflights_0.png?itok=o4E7Lkux" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>Aeronautics and Astronautics</h1> 
      <p>Provides you with the principles and techniques necessary for success and leadership in the conception, design, implementation, and operation of aerospace and related engineering systems.</p>
    </div>
  </div>
</div>

</body>
</html>

Upvotes: 0

ege
ege

Reputation: 774

They are called Flip Cards. Here is an example and tutorial: https://www.w3schools.com/howto/howto_css_flip_card.asp

Upvotes: 0

Related Questions