css3d翻转

最新推荐文章于 2024-07-10 10:04:49 发布

韩大璐

最新推荐文章于 2024-07-10 10:04:49 发布

阅读量644

点赞数

分类专栏： css 文章标签： css 3d 翻转 rotate

本文链接：https://blog.csdn.net/weixin_41257563/article/details/97633868

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<div class="repast-cate-item-content">
  <div class="repast-cate-item-main">
    <img :src="item.main.imgSrc">
    <p>{{item.main.name}}</p>
  </div>
  <div class="repast-cate-item-back">
    <h4>{{item.back.name}}</h4>
    <p>{{item.back.intro}}</p>
  </div>
</div>

  .repast-cate .repast-cate-item-content{
    width: 440px;
    height: 300px;
    background: #fff;
    position: relative;
    perspective: 800px;
  }
  .repast-cate .repast-cate-item-content .repast-cate-item-main{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
    transition: 1s;
    position: absolute;
    left: 0;
    top: 0;
  }
  /*.repast-cate .repast-cate-item-content .repast-cate-item-main img{*/
  /*  height: 96px;*/
  /*  margin-bottom: 30px;*/
  /*}*/
  /*.repast-cate .repast-cate-item-content .repast-cate-item-main p{*/
  /*  font-size: 30px;*/
  /*  color: #2C2C2C;*/
  /*}*/
  .repast-cate .repast-cate-item-content .repast-cate-item-back{
    width: 100%;
    height: 100%;
    background:rgba(43,194,163,1);
    padding: 37px 34px;
    box-sizing: border-box;
    color: #fff;
    backface-visibility: hidden;
    transform: rotateY(-180deg);
    transition: 1s;
    position: absolute;
    left: 0;
    top: 0;
  }
  /*.repast-cate .repast-cate-item-content .repast-cate-item-back h4{*/
  /*  font-size: 30px;*/
  /*  margin-bottom: 19px;*/
  /*}*/
  /*.repast-cate .repast-cate-item-content .repast-cate-item-back p{*/
  /*  font-size: 18px;*/
  /*}*/
  .repast-cate .repast-cate-item-content:hover .repast-cate-item-main{
    transform: rotateY(180deg);
  }
  .repast-cate .repast-cate-item-content:hover .repast-cate-item-back{
    transform: rotateY(0deg);
  }

backface-visibility: hidden; 这个属性的作用就是翻转过去的内容被隐藏了，所以我们只能看到一个面的内容。就达到了一个卡片2个面切换显示。
transform: rotateY(-180deg); 这个是css3的翻转功能，但是要想实现3d效果还要加上景深perspective: 800px;

效果图：
在这里插入图片描述