• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

CSS3实现3D翻牌酷炫效果

CSS3 web前端中文站 2年前 (2018-03-14) 12443次浏览 已收录 13个评论

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

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

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

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

CSS3 实现 3D 翻牌酷炫效果

CSS 制作 3D 翻牌酷炫效果

 

CSS3 实现 3D 翻牌酷炫效果

纯 CSS 实现 3D 翻牌

在线演示

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

百度网盘下载 ? ? ?密码:1wyi

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

代码如下:

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


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS3 实现 3D 翻牌酷炫效果
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(13)个小伙伴在吐槽
  1. Hi. My name Tanya. Looking for a guy to meet. I will come to your area or meet me. I live very close. My address
    NancyJug2019-08-25 16:50 回复
  2. 酷炫
    web前端中文站2019-06-01 22:52 回复
  3. 123
    4314142019-06-01 07:38 回复
  4. 132132阿瑟东
    1232019-04-24 13:37 回复
  5. 123
    方法2019-02-13 14:00 回复
  6. what
    1232019-01-21 21:45 回复
  7. mark一下 :oops:
    weather2018-12-03 21:12 回复
  8. 学习学习
    渣渣2018-11-17 16:53 回复
  9. 刚回家
    结核杆菌2018-09-05 15:43 回复
  10. 來學習一下
    aaa2018-06-06 12:52 回复
  11. :oops:
    啦啦啦2018-05-29 11:00 回复
  12. 下载试试先
    seo2018-03-14 22:50 回复
  13. 沙发沙发,CSS3是真的强,效果和之前CSS不一样了!
    lisa2018-03-14 22:45 回复