前端3D炫酷展开效果

效果图

.vue

<template>
  <div class="expand">
    <img class="expand-img expand-img-1" src="https://get.hnzmsz.com/ly/1-1.png" />
    <img class="expand-img expand-img-2" src="https://get.hnzmsz.com/ly/1-2.png" />
  </div>
</template>

<script setup>
</script>

<style scoped>
.expand{
  position: relative;
  width: 230px;
  height: 350px;
  margin: 0 auto;

  --s:1s;
}

.expand-img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.expand-img-1{
  transform-origin: bottom;
  transition: all var(--s);
}

.expand-img-2{
  transform-origin: bottom;
  transition: all var(--s);
}

.expand:hover .expand-img-1{
  transform: perspective(1000px) rotateX(30deg) skewX(-20deg);
}

.expand:hover .expand-img-2{
  transform: scale(1.3);
}
</style>

遇到问题可以看我主页加我，很少看博客，对你有帮助别忘记点赞收藏。