CSS3实现3D翻牌酷炫效果

最近一直在学css3,发现它实现效果之强大。现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了。它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出来的一些渐变啊圆角啊阴影啊什么的效果,如此之炫的它,我相信已经有很多人对它做了更深的研究了吧。

今天我也在小小的研究了下它,主要是关于它的一些3d效果。

所谓的3d翻牌效果,其实就是两张图片,一张在前,一张在后,当前面的那张发生旋转后,转到一定角度时后面的图片就会跟着它的步伐一起旋转,只是一个旋转到看不见,而一个刚要转的我们看的见。

具体操作是当鼠标逐渐靠近牌上,图片开始以z轴0~180°进行翻转,当离开时,则以180°恢复到0°。具体效果直接上图:

CSS制作3D翻牌酷炫效果

CSS制作3D翻牌酷炫效果

 

纯CSS实现3D翻牌

纯CSS实现3D翻牌

在线演示

具体3D翻转代码,html和css代码demo、图片素材在下面链接:

抱歉,只有对本文发表过评论才能阅读隐藏内容。

==========================

代码如下:

<body>
<div class="wrap">
    <ul class="card-list clearfix">
        <li class="card">
            <div class="card-face">
                <img src="cards/bg.png">
            </div>
            <div class="card-back">
                <img src="cards/1.png">
            </div>
        </li>
        <li class="card">
            <div class="card-face">
                <img src="cards/bg.png">
            </div>
            <div class="card-back">
                <img src="cards/2.png">
            </div>
        </li>
        <li class="card">
            <div class="card-face">
                <img src="cards/bg.png">
            </div>
            <div class="card-back">
                <img src="cards/3.png">
            </div>
        </li>
        <li class="card">
            <div class="card-face">
                <img src="cards/bg.png">
            </div>
            <div class="card-back">
                <img src="cards/4.png">
            </div>
        </li>
        <li class="card">
            <div class="card-face">
                <img src="cards/bg.png">
            </div>
            <div class="card-back">
                <img src="cards/5.png">
            </div>
        </li>
    </ul>
</div>
</body>
/*
-webkit-  兼容 Safari and Chrome
-moz-     兼容 Firefox 4
-o-		  兼容 Opera
-ms- 	  兼容 IE9
*/

body {margin: 0;}
ul, li {margin: 0;padding: 0;list-style: none;}
.clearfix {*zoom: 1;}										/*清除浮动*/
.clearfix:after {display: table;content: '';clear: both;}  /*兼容其他浏览器*/

.card-list .card {
    float: left;
    position: relative;
    margin-left: 20px;
    margin-top: 20px;
    width: 270px;
    height: 376px;
    -webkit-perspective: 600px;			/*兼容 Safari and Chrome */
    -moz-perspective: 600px;			/*兼容 Firefox 4 */
    -ms-perspective: 600px;
    perspective: 600px;
}

.card-list .card-face,
.card-list .card-back {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;  /*规定以慢速开始和结束的过渡效果*/
    -webkit-transform-style: perspective-3d;
    -moz-transform-style: perspective-3d;
    -ms-transform-style: perspective-3d;
    transform-style: perspective-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;    /*如果在旋转元素不希望看到其背面时,该属性很有用。*/
}

.card-list .card-face {
    z-index: 2;				/*这个属性控制牌的背面在最上层*/
}

.card-list .card-back {
    z-index: 1;
    -webkit-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.card-list .card:hover .card-face {
    z-index: 1;				/*当鼠标在上面,-1,变为底下*/
    -webkit-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.card-list .card:hover .card-back {
    z-index: 2;
    -webkit-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    transform: rotateY(0);
}

 

web前端中文站点评:

CSS3的强大,相信大家都已经见识到了。在学习前端的过程中,了解最新前沿的技术是非常有必要的,所以大家赶紧研究研究吧,敲敲代码。

4
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到

(12)条精彩评论:
  1. web前端中文站
    酷炫
    web前端中文站2019-06-01 22:52 回复
  2. 431414
    123
    4314142019-06-01 07:38 回复
  3. <a href='http://www.baidu.com' rel='external nofollow' class='url'>123</a>
    132132阿瑟东
    1232019-04-24 13:37 回复
  4. <a href='http://123213' rel='external nofollow' class='url'>方法</a>
    123
    方法2019-02-13 14:00 回复
  5. 123
    what
    1232019-01-21 21:45 回复
  6. <a href='http://www.weather05.xyz' rel='external nofollow' class='url'>weather</a>
    mark一下 :oops:
    weather2018-12-03 21:12 回复
  7. 渣渣
    学习学习
    渣渣2018-11-17 16:53 回复
  8. <a href='http://new.taobc.com/14/yule/106413_6.html' rel='external nofollow' class='url'>结核杆菌</a>
    刚回家
    结核杆菌2018-09-05 15:43 回复
  9. aaa
    來學習一下
    aaa2018-06-06 12:52 回复
  10. 啦啦啦
    :oops:
    啦啦啦2018-05-29 11:00 回复
  11. <a href='http://www.lisashopmall.com' rel='external nofollow' class='url'>seo</a>
    下载试试先
    seo2018-03-14 22:50 回复
  12. <a href='http://www.lisashopmall.com' rel='external nofollow' class='url'>lisa</a>
    沙发沙发,CSS3是真的强,效果和之前CSS不一样了!
    lisa2018-03-14 22:45 回复