Skip to main content
se eliminaron 23 caracteres en el cuerpo
Origen Enlace
//Movement
const card = document.querySelector(".card")
const main = document.querySelector(".main")

//Items
const sneaker = document.querySelector(".sneaker img")
const title = document.querySelector(".title")
const purchase = document.querySelector(".purchase")
const info = document.querySelector(".info")

//For
var divs = document.querySelectorAll('.container')
console.log(divs)
let y = divs.length

//Movement Animation
for (let i = 0; i < y; i++) {
  divs[i].addEventListener("mousemove", (e) => {
    let xAxis = (window.innerWidth / 4 - e.pageX) / 50;
    let yAxis = (window.innerHeight / 4 - e.pageY) / 50;
    card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
  })
  //Movement in
  divs[i].addEventListener("mouseenter", (e) => {
    card.style.transition = "none";

    //Popout
    sneaker.style.transform = "translateZ(100px) rotateZ(-45deg)"
    title.style.transform = "translateZ(50px)"
    purchase.style.transform = "translateZ(25px)"
    info.style.transform = "translateZ(40px)"
  })

  //Movement Out
  divs[i].addEventListener("mouseleave", (e) => {
    card.style.transition = "all 0.5s ease"
    card.style.transform = `rotateY(0deg) rotateX(0deg)`

    //Popback
    title.style.transform = "translateZ(0px)"
    sneaker.style.transform = "translateZ(0px)"
    purchase.style.transform = "translateZ(0px)"
    info.style.transform = "translateZ(0px)"
  })
}
* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 30%;
  margin: auto;
}

.container .card {
  min-height: 80vh;
  width: 70%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  padding: 2rem;
  background-color: #fff;
  border-radius: 30px;
  -webkit-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
}

.container .card .sneaker {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 5rem 0;
}

.container .card .sneaker .circle {
  z-index: 1;
  position: absolute;
  height: 12rem;
  width: 12rem;
  background: -webkit-gradient(linear, left top, right top, from(rgba(245, 70, 66, 0.75)), to(rgba(8, 83, 156, 0.75)));
  background: linear-gradient(to right, rgba(245, 70, 66, 0.75), rgba(8, 83, 156, 0.75));
  border-radius: 50%;
}

.container .card .sneaker img {
  z-index: 2;
  width: 17rem;
  -webkit-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

.container .card .info {
  width: 70%;
  -webkit-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

.container .card .info .title {
  font-size: 2rem;
  -webkit-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

.container .card .info .text {
  font-size: .7rem;
  text-transform: uppercase;
  color: #585858;
}

.container .sizes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 2rem 0;
}

.container .sizes button {
  padding: .1rem 1rem;
  border: none;
  background-color: transparent;
  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  cursor: pointer;
}

.container .sizes .active {
  color: white;
  background-color: #585858;
}

.container .purchase {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

.container .purchase button {
  border: none;
  background-color: #f54642;
  color: white;
  padding: .5rem 5rem;
  border-radius: 30px;
  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}


/*# sourceMappingURL=styles.css.map */
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="description" content="tenis hover 3D effect">

  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

  <title>Adidas</title>
</head>

<body>
  <div class="main" id="main">
    <div class="container">
      <div class="card">
        <div class="sneaker">
          <div class="circle"></div>
          <img src="/adidas.png" alt="">
        </div>
        <div class="info">
          <h1 class="title">Adidas ZX</h1>
          <h3 class="text">future-ready trainver with wrapped boost for exception comfort</h3>
        </div>
        <div class="sizes">
          <button>39</button>
          <button>40</button>
          <button class="active">42</button>
          <button>44</button>
        </div>
        <div class="purchase">
          <button>Purchase</button>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="card">
        <div class="sneaker">
          <div class="circle"></div>
          <img src="/adidas.png" alt="">
        </div>
        <div class="info">
          <h1 class="title">Adidas ZX</h1>
          <h3 class="text">future-ready trainver with wrapped boost for exception comfort</h3>
        </div>
        <div class="sizes">
          <button>39</button>
          <button>40</button>
          <button class="active">42</button>
          <button>44</button>
        </div>
        <div class="purchase">
          <button>Purchase</button>
        </div>
      </div>
    </div>
  </div>
  <script defer src="/script.js"></script>

</body>

</html>
//Movement
const card = document.querySelector(".card")
const main = document.querySelector(".main")

//Items
const sneaker = document.querySelector(".sneaker img")
const title = document.querySelector(".title")
const purchase = document.querySelector(".purchase")
const info = document.querySelector(".info")

//For
var divs = document.querySelectorAll('.container')
console.log(divs)
let y = divs.length

//Movement Animation
for (let i = 0; i < y; i++) {
  divs[i].addEventListener("mousemove", (e) => {
    let xAxis = (window.innerWidth / 4 - e.pageX) / 50;
    let yAxis = (window.innerHeight / 4 - e.pageY) / 50;
    card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
  })
  //Movement in
  divs[i].addEventListener("mouseenter", (e) => {
    card.style.transition = "none";

    //Popout
    sneaker.style.transform = "translateZ(100px) rotateZ(-45deg)"
    title.style.transform = "translateZ(50px)"
    purchase.style.transform = "translateZ(25px)"
    info.style.transform = "translateZ(40px)"
  })

  //Movement Out
  divs[i].addEventListener("mouseleave", (e) => {
    card.style.transition = "all 0.5s ease"
    card.style.transform = `rotateY(0deg) rotateX(0deg)`

    //Popback
    title.style.transform = "translateZ(0px)"
    sneaker.style.transform = "translateZ(0px)"
    purchase.style.transform = "translateZ(0px)"
    info.style.transform = "translateZ(0px)"
  })
}
* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 30%;
  margin: auto;
}

.container .card {
  min-height: 80vh;
  width: 70%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  padding: 2rem;
  background-color: #fff;
  border-radius: 30px;
  -webkit-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
}

.container .card .sneaker {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 5rem 0;
}

.container .card .sneaker .circle {
  z-index: 1;
  position: absolute;
  height: 12rem;
  width: 12rem;
  background: -webkit-gradient(linear, left top, right top, from(rgba(245, 70, 66, 0.75)), to(rgba(8, 83, 156, 0.75)));
  background: linear-gradient(to right, rgba(245, 70, 66, 0.75), rgba(8, 83, 156, 0.75));
  border-radius: 50%;
}

.container .card .sneaker img {
  z-index: 2;
  width: 17rem;
  -webkit-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

.container .card .info {
  width: 70%;
  -webkit-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

.container .card .info .title {
  font-size: 2rem;
  -webkit-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

.container .card .info .text {
  font-size: .7rem;
  text-transform: uppercase;
  color: #585858;
}

.container .sizes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 2rem 0;
}

.container .sizes button {
  padding: .1rem 1rem;
  border: none;
  background-color: transparent;
  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  cursor: pointer;
}

.container .sizes .active {
  color: white;
  background-color: #585858;
}

.container .purchase {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

.container .purchase button {
  border: none;
  background-color: #f54642;
  color: white;
  padding: .5rem 5rem;
  border-radius: 30px;
  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}


/*# sourceMappingURL=styles.css.map */
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="description" content="tenis hover 3D effect">

  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

  <title>Adidas</title>
</head>

<body>
  <div class="main" id="main">
    <div class="container">
      <div class="card">
        <div class="sneaker">
          <div class="circle"></div>
          <img src="/adidas.png" alt="">
        </div>
        <div class="info">
          <h1 class="title">Adidas ZX</h1>
          <h3 class="text">future-ready trainver with wrapped boost for exception comfort</h3>
        </div>
        <div class="sizes">
          <button>39</button>
          <button>40</button>
          <button class="active">42</button>
          <button>44</button>
        </div>
        <div class="purchase">
          <button>Purchase</button>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="card">
        <div class="sneaker">
          <div class="circle"></div>
          <img src="/adidas.png" alt="">
        </div>
        <div class="info">
          <h1 class="title">Adidas ZX</h1>
          <h3 class="text">future-ready trainver with wrapped boost for exception comfort</h3>
        </div>
        <div class="sizes">
          <button>39</button>
          <button>40</button>
          <button class="active">42</button>
          <button>44</button>
        </div>
        <div class="purchase">
          <button>Purchase</button>
        </div>
      </div>
    </div>
  </div>
  <script defer src="/script.js"></script>

</body>

</html>
//Movement
const card = document.querySelector(".card")
const main = document.querySelector(".main")

//Items
const sneaker = document.querySelector(".sneaker img")
const title = document.querySelector(".title")
const purchase = document.querySelector(".purchase")
const info = document.querySelector(".info")

//For
var divs = document.querySelectorAll('.container')
let y = divs.length

//Movement Animation
for (let i = 0; i < y; i++) {
  divs[i].addEventListener("mousemove", (e) => {
    let xAxis = (window.innerWidth / 4 - e.pageX) / 50;
    let yAxis = (window.innerHeight / 4 - e.pageY) / 50;
    card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
  })
  //Movement in
  divs[i].addEventListener("mouseenter", (e) => {
    card.style.transition = "none";

    //Popout
    sneaker.style.transform = "translateZ(100px) rotateZ(-45deg)"
    title.style.transform = "translateZ(50px)"
    purchase.style.transform = "translateZ(25px)"
    info.style.transform = "translateZ(40px)"
  })

  //Movement Out
  divs[i].addEventListener("mouseleave", (e) => {
    card.style.transition = "all 0.5s ease"
    card.style.transform = `rotateY(0deg) rotateX(0deg)`

    //Popback
    title.style.transform = "translateZ(0px)"
    sneaker.style.transform = "translateZ(0px)"
    purchase.style.transform = "translateZ(0px)"
    info.style.transform = "translateZ(0px)"
  })
}
* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 30%;
  margin: auto;
}

.container .card {
  min-height: 80vh;
  width: 70%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  padding: 2rem;
  background-color: #fff;
  border-radius: 30px;
  -webkit-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
}

.container .card .sneaker {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 5rem 0;
}

.container .card .sneaker .circle {
  z-index: 1;
  position: absolute;
  height: 12rem;
  width: 12rem;
  background: -webkit-gradient(linear, left top, right top, from(rgba(245, 70, 66, 0.75)), to(rgba(8, 83, 156, 0.75)));
  background: linear-gradient(to right, rgba(245, 70, 66, 0.75), rgba(8, 83, 156, 0.75));
  border-radius: 50%;
}

.container .card .sneaker img {
  z-index: 2;
  width: 17rem;
  -webkit-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

.container .card .info {
  width: 70%;
  -webkit-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

.container .card .info .title {
  font-size: 2rem;
  -webkit-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

.container .card .info .text {
  font-size: .7rem;
  text-transform: uppercase;
  color: #585858;
}

.container .sizes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 2rem 0;
}

.container .sizes button {
  padding: .1rem 1rem;
  border: none;
  background-color: transparent;
  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  cursor: pointer;
}

.container .sizes .active {
  color: white;
  background-color: #585858;
}

.container .purchase {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

.container .purchase button {
  border: none;
  background-color: #f54642;
  color: white;
  padding: .5rem 5rem;
  border-radius: 30px;
  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}


/*# sourceMappingURL=styles.css.map */
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="description" content="tenis hover 3D effect">

  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

  <title>Adidas</title>
</head>

<body>
  <div class="main" id="main">
    <div class="container">
      <div class="card">
        <div class="sneaker">
          <div class="circle"></div>
          <img src="/adidas.png" alt="">
        </div>
        <div class="info">
          <h1 class="title">Adidas ZX</h1>
          <h3 class="text">future-ready trainver with wrapped boost for exception comfort</h3>
        </div>
        <div class="sizes">
          <button>39</button>
          <button>40</button>
          <button class="active">42</button>
          <button>44</button>
        </div>
        <div class="purchase">
          <button>Purchase</button>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="card">
        <div class="sneaker">
          <div class="circle"></div>
          <img src="/adidas.png" alt="">
        </div>
        <div class="info">
          <h1 class="title">Adidas ZX</h1>
          <h3 class="text">future-ready trainver with wrapped boost for exception comfort</h3>
        </div>
        <div class="sizes">
          <button>39</button>
          <button>40</button>
          <button class="active">42</button>
          <button>44</button>
        </div>
        <div class="purchase">
          <button>Purchase</button>
        </div>
      </div>
    </div>
  </div>
  <script defer src="/script.js"></script>

</body>

</html>
Origen Enlace

¿Cómo saber en que div está posicionado mi mouse si los dos tienen la misma clase?

Holaaaa, tengo un proyecto donde estoy ocupando una animación en JavaScript donde si pasas el mouse sobre un div, este se mueve en relación a la posición del mouse, y este efecto lo quiero aplicar a varios div con la misma clase, ¿como puedo hacerlo?

Ya intenté haciendo un contenedor padre donde están mis dos div y obteniéndolos como hijos, pero al tener la misma clase, cuando hago hover sobre un div se ve afectado el otro

Entonces necesito saber como darle "individualidad" a cada div a pesar de que tengan la misma clase, porque la animación que quiero implementar tiene que afectar a varios elementos a la vez

O pueden darme alguna recomendación o algún cambio

//Movement
const card = document.querySelector(".card")
const main = document.querySelector(".main")

//Items
const sneaker = document.querySelector(".sneaker img")
const title = document.querySelector(".title")
const purchase = document.querySelector(".purchase")
const info = document.querySelector(".info")

//For
var divs = document.querySelectorAll('.container')
console.log(divs)
let y = divs.length

//Movement Animation
for (let i = 0; i < y; i++) {
  divs[i].addEventListener("mousemove", (e) => {
    let xAxis = (window.innerWidth / 4 - e.pageX) / 50;
    let yAxis = (window.innerHeight / 4 - e.pageY) / 50;
    card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
  })
  //Movement in
  divs[i].addEventListener("mouseenter", (e) => {
    card.style.transition = "none";

    //Popout
    sneaker.style.transform = "translateZ(100px) rotateZ(-45deg)"
    title.style.transform = "translateZ(50px)"
    purchase.style.transform = "translateZ(25px)"
    info.style.transform = "translateZ(40px)"
  })

  //Movement Out
  divs[i].addEventListener("mouseleave", (e) => {
    card.style.transition = "all 0.5s ease"
    card.style.transform = `rotateY(0deg) rotateX(0deg)`

    //Popback
    title.style.transform = "translateZ(0px)"
    sneaker.style.transform = "translateZ(0px)"
    purchase.style.transform = "translateZ(0px)"
    info.style.transform = "translateZ(0px)"
  })
}
* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 30%;
  margin: auto;
}

.container .card {
  min-height: 80vh;
  width: 70%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  padding: 2rem;
  background-color: #fff;
  border-radius: 30px;
  -webkit-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.2);
}

.container .card .sneaker {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 5rem 0;
}

.container .card .sneaker .circle {
  z-index: 1;
  position: absolute;
  height: 12rem;
  width: 12rem;
  background: -webkit-gradient(linear, left top, right top, from(rgba(245, 70, 66, 0.75)), to(rgba(8, 83, 156, 0.75)));
  background: linear-gradient(to right, rgba(245, 70, 66, 0.75), rgba(8, 83, 156, 0.75));
  border-radius: 50%;
}

.container .card .sneaker img {
  z-index: 2;
  width: 17rem;
  -webkit-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

.container .card .info {
  width: 70%;
  -webkit-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

.container .card .info .title {
  font-size: 2rem;
  -webkit-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

.container .card .info .text {
  font-size: .7rem;
  text-transform: uppercase;
  color: #585858;
}

.container .sizes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 2rem 0;
}

.container .sizes button {
  padding: .1rem 1rem;
  border: none;
  background-color: transparent;
  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  cursor: pointer;
}

.container .sizes .active {
  color: white;
  background-color: #585858;
}

.container .purchase {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all 0.75s ease-out;
  transition: all 0.75s ease-out;
}

.container .purchase button {
  border: none;
  background-color: #f54642;
  color: white;
  padding: .5rem 5rem;
  border-radius: 30px;
  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}


/*# sourceMappingURL=styles.css.map */
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="description" content="tenis hover 3D effect">

  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

  <title>Adidas</title>
</head>

<body>
  <div class="main" id="main">
    <div class="container">
      <div class="card">
        <div class="sneaker">
          <div class="circle"></div>
          <img src="/adidas.png" alt="">
        </div>
        <div class="info">
          <h1 class="title">Adidas ZX</h1>
          <h3 class="text">future-ready trainver with wrapped boost for exception comfort</h3>
        </div>
        <div class="sizes">
          <button>39</button>
          <button>40</button>
          <button class="active">42</button>
          <button>44</button>
        </div>
        <div class="purchase">
          <button>Purchase</button>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="card">
        <div class="sneaker">
          <div class="circle"></div>
          <img src="/adidas.png" alt="">
        </div>
        <div class="info">
          <h1 class="title">Adidas ZX</h1>
          <h3 class="text">future-ready trainver with wrapped boost for exception comfort</h3>
        </div>
        <div class="sizes">
          <button>39</button>
          <button>40</button>
          <button class="active">42</button>
          <button>44</button>
        </div>
        <div class="purchase">
          <button>Purchase</button>
        </div>
      </div>
    </div>
  </div>
  <script defer src="/script.js"></script>

</body>

</html>