html - 如何使用透视进行这样的悬停？

Question

如何使用透视进行这样的悬停？

body {
  margin: 0;
  padding: 0;
}

* {
  	box-sizing: border-box;
}


*::after,
*::before {
  box-sizing: border-box;
}
	
  
.wrap {
  display: flex;
  background-color: #10ADF4;
  padding: 20px;
  perspective: 600px;
}

.item {
  width: 50%;
  padding: 20px;
  transition: 0.3s background-color, 0.3s transform;
}

.item:hover {
  background-color: #fff;
  transform: translateZ(40px) rotateX(30deg);
}

<div class="wrap">
  <div class="item">
    <h3>lorem</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis voluptate voluptas, laudantium nisi reiciendis odit, at veritatis molestiae et autem, quod vero, rerum nobis temporibus aperiam saepe minus. At, totam.</p>
  </div>
  <div class="item">
    <h3>lorem</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis voluptate voluptas, laudantium nisi reiciendis odit, at veritatis molestiae et autem, quod vero, rerum nobis temporibus aperiam saepe minus. At, totam.</p>
  </div>
</div>

标签： htmlcss

Answer 1

您可以更新您的代码，如下所示：

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.wrap {
  display: flex;
  background-color: #10ADF4;
  padding: 20px;
  perspective: 600px;
}

.item {
  width: 50%;
  padding: 20px;
  transform-origin: top;/* make the origin top */
}
.item,
.item * {
  transition: 0.3s background-color, 0.3s transform;
  transform: perspective(100px) rotateX(0); /* initial transform to avoid flicker */
}

.item:hover {
  background-color: #fff;
  transform: perspective(100px) rotateX(-5deg); /* perspective before rotation */
}

.item:hover * {
  transform:perspective(100px) rotateX(5deg); /* to keep the text untouched by the transform */
}

<div class="wrap">
  <div class="item">
    <h3>lorem</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis voluptate voluptas, laudantium nisi reiciendis odit, at veritatis molestiae et autem, quod vero, rerum nobis temporibus aperiam saepe minus. At, totam.</p>
  </div>
  <div class="item">
    <h3>lorem</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis voluptate voluptas, laudantium nisi reiciendis odit, at veritatis molestiae et autem, quod vero, rerum nobis temporibus aperiam saepe minus. At, totam.</p>
  </div>
</div>