Vue，实现3D盒子旋转相册

最新推荐文章于 2024-08-10 23:00:07 发布

爱吃的前端程序员

最新推荐文章于 2024-08-10 23:00:07 发布

阅读量2.5k

点赞数 2

分类专栏： vue html css3 文章标签： css3

本文链接：https://blog.csdn.net/y521123y/article/details/106331867

版权

vue 同时被 3 个专栏收录

21 篇文章 3 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

css3

2 篇文章 0 订阅

订阅专栏

效果图
vue，实现3D盒子旋转相册

<template>
  <div class="content">
    <div class="top"><img src="./imgs/1.jpg"></div>
    <div class="bottom"><img src="./imgs/2.jpg"></div>
    <div class="left"><img src="./imgs/3.jpg"></div>
    <div class="right"><img src="./imgs/4.jpg"></div>
    <div class="front"><img src="./imgs/5.jpg"></div>
    <div class="after"><img src="./imgs/6.jpg"></div> 
  </div>
</template>
<style scoped>
.content{
  width:200px;
  height:200px;
  transform-style:preserve-3d;
  transform: rotateX(-30deg) rotateY(-80deg);
  position:relative;
  margin:200px auto;
  animation: rotate linear 20s infinite;
}
@-webkit-keyframes rotate {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
.content div{
  width:200px;
  height:200px;
  position: absolute;
  opacity:.8;
}
.content>div>img{
  width:200px;
  height:200px;
}
.content .top{
  transform: rotateX(90deg) translateZ(100px);
}
.content .left{
  transform: rotateY(-90deg) translateZ(100px);
}
.content .bottom{
  transform: rotateX(-90deg) translateZ(100px);
}
.content .right{
  transform: rotateY(90deg) translateZ(100px);
}
.content .front{
  transform: rotateY(0deg) translateZ(100px);
}
.content .after{
  transform: translateZ(-100px) rotateY(180deg);
}
</style>