纯CSS实现3D翻牌效果

待我称王封你为后i 2022-08-25 08:36 439阅读 0赞

CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果。

简易效果请大家狠戳这里[在线体验][Link 1]，或[下载收藏][Link 2]。

改进效果请大家戳这里[在线体验][Link 3]，或[下载收藏][Link 4]。

html部分我们用flip类做翻转的盒子，x和y两个类分别代表垂直翻转和水平翻转。front和back两个div做翻转图像的正面和反面。

嗯，接下来看看CSS，首先我们需要布局好元素

/* 顶部的盒子 */
    .container{
      width:1320px;
      margin:50px auto;
    }
    /* 翻转类样式 */
    .flip{
      width:640px;
      height: 320px;
      margin:10px;
      float:left;
      position: relative;
    }
    /* 前后两个类的共同样式 */
    .flip div{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      box-shadow: 2px 2px 20px rgba(0,0,0,.5);
    }
    /* 提示文本利用：before伪对象到位 */
    .flip div:before{
      content:attr(data-text);
      width:100%;
      height:30px;
      position:absolute;
      left:0;
      bottom:0;
      line-height:30px;
      text-align:center;
      color:#fff;
      background-color:rgba(0,0,0,.3);
    }
    /* 分别设置前后两个类的背景图像，垂直位置 */
    .flip div.front{
      background: url(http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg);
      z-index: 1;
    }
    .flip div.back{
      background: url(http://thecodeplayer.com/uploads/media/40Ly3VB.jpg);
      z-index: 2;
    }

然后我们需要让flip响应hover事件，添加transform和transition

/* 翻转类样式 */
    .flip{
      /*其他代码略*/
      /* 设置景深 */
      perspective: 1000px;
    }
    /* 前后两个类的共同样式 */
    .flip div{ 
      /*其他代码略*/
      transition: all 1s ease; 
      transform-style: preserve-3d; 
      backface-visibility: hidden;
    }
    /* hover之后的垂直位置 */
    .flip:hover div.front{ z-index: 2;;}
    .flip:hover div.back{ z-index: 1;;}/
    * rotateY的响应 */
    .Y div.back{ transform:rotateY(180deg);}
    .Y:hover div.front{ transform:rotateY(180deg);}
    .Y:hover div.back{ transform:rotateY(0deg);}
    /* rotateX的响应 */
    .X div.back{ transform:rotateX(180deg);}
    .X:hover div.front{ transform:rotateX(180deg);}
    .X:hover div.back{ transform:rotateX(0deg);}

好的，简易效果完工！接下来我们实现slider，单击播放下一个图像，到这里看 [效果][Link 3]。这个效果用了input单选框来实现单击事件。

CSS部分也要改进下。

.gallery {
     
    }
    .gallery input {
        display:none;
        position:absolute;
    }
    .container {
        position: relative;
        height:640px;
        width:320px;
        transition: 1.5s ease-in-out;
    }
    .container div {
        position:absolute;
        left:0;
        top:0;
        width:640px;
        height:320px;
        transition: 1.5s ease-in-out;
        border:1px solid #888;
        backface-visibility: hidden;
        -webkit-perspective: 1200px;
    }
    .container div.front {
        transform: rotateY(180deg);
    }
    .container div.back {
        transform: rotateY(0deg);
    }
    .container label {
        display:block;
        width:640px;
        height:320px;
        position:absolute;
        left:0;
        top:0;
        display:none;
        cursor:pointer;
    }
    input:nth-of-type(2n):checked ~ .container div.front {
        transform: rotateY(0deg);
    }
    input:nth-of-type(2n+1):checked ~ .container div.front {
        transform: rotateY(180deg);
    }
    input:nth-of-type(2n):checked ~ .container div.back {
        transform: rotateY(-179.9deg);
    }
    input:nth-of-type(2n+1):checked ~ .container div.back {
        transform: rotateY(0deg);
    }
    
    #p1:checked ~ .container label:nth-of-type(2) {
        display:block;
    }
    #p1:checked ~ .container div.front {
        background:url(http://thecodeplayer.com/uploads/media/8k3N3EL.jpg);
    }
    #p1:checked ~ .container div.back {
        background:url(http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg);
    }
    #p2:checked ~ .container label:nth-of-type(3) {
        display:block;
    }
    #p2:checked ~ .container div.front {
        background:url(http://thecodeplayer.com/uploads/media/40Ly3VB.jpg);
    }
    #p2:checked ~ .container div.back {
        background:url(http://thecodeplayer.com/uploads/media/8k3N3EL.jpg);
    }
    #p3:checked ~ .container label:nth-of-type(4) {
        display:block;
    }
    #p3:checked ~ .container div.front {
        background:url(http://thecodeplayer.com/uploads/media/40Ly3VB.jpg);
    }
    #p3:checked ~ .container div.back {
        background:url(http://thecodeplayer.com/uploads/media/00kih8g.jpg);
    }
    
    #p4:checked ~ .container label:nth-of-type(5) {
        display:block;
    }
    #p4:checked ~ .container div.front {
        background:url(http://thecodeplayer.com/uploads/media/2rT2vdx.jpg);
    }
    #p4:checked ~ .container div.back {
        background:url(http://thecodeplayer.com/uploads/media/00kih8g.jpg);
    }
    #p5:checked ~ .container label:nth-of-type(1) {
        display:block;
    }
    #p5:checked ~ .container div.front {
        background:url(http://thecodeplayer.com/uploads/media/2rT2vdx.jpg);
    }
    #p5:checked ~ .container div.back {
        background:url(http://thecodeplayer.com/uploads/media/8k3N3EL.jpg);
    }

完工！

\---------------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[Link 1]: http://codepen.io/whqet/pen/AfLvt
[Link 2]: http://codepen.io/whqet/share/zip/AfLvt
[Link 3]: http://codepen.io/whqet/pen/GKswf
[Link 4]: http://codepen.io/whqet/share/zip/GKswf
[whqet]: http://blog.csdn.net/whqet