CSS3 3D变换--扑克牌翻转

学了css的3D变换后，想自己做一个扑克牌的翻转效果，那么怎么来实现呢，一起来试试吧！

思路：

首先写出牌面的文字和结构，在设置牌面的变换时，将变换的牌正面和背面放在一个父容器里，即需要四个父容器，这四个容器可以放在一个大的div里。
后采用层定位让牌面的正面和背面有一个叠加的效果，先显示图片，当鼠标悬停时产生3D变换，于是显示牌的背面。

来看看最终效果图：
鼠标移入时翻转页面的效果：

HTML基本结构如下：

<div id="card"><div class="box"><div class="face front"> <!--正面--><span class="number">A</span><span class="icon">♠</span><span class="center">♠</span><span class="bottom">♠</span><span class="bottom_num">A</span></div><div class="face back"><h3>这是黑桃A</h3></div><!--反面--></div><div class="box"><div class="face front"> <span class="number red">2</span><span class="icon red">♥</span><span class="center red">♥</span><span class="bottom red">♥</span><span class="bottom_num red">2</span></div><div class="face back"><h3>这是红桃2</h3></div></div><div class="box"><div class="face front"> <span class="number">3</span><span class="icon">♣</span><span class="center">♣</span><span class="bottom">♣</span><span class="bottom_num">3</span></div><div class="face back"><h3>这是草花3</h3></div></div><div class="box"><div class="face front"> <span class="number red">4</span><span class="icon red">♦</span><span class="center red">♦</span><span class="bottom red">♦</span><span class="bottom_num red">4</span></div><div class="face back"><h3>这是方片4</h3></div></div></div>

CSS样式如下：

       /*整体居中*/#card{margin: 100px auto;}/*每张牌的宽高及阴影*/.box{width: 230px;height: 320px;margin: 50px;border: 1px solid #656565;border-radius: 10px;transform-style: preserve-3d;transition: 1.5s;position: relative;box-shadow:-6px 9px 5px #8C8C8C ;float: left;}/*鼠标移入时翻转*/.box:hover{transform: rotateY(180deg);}/*牌样式*/.face{width: 230px;height: 320px;border-radius: 10px;position: absolute;backface-visibility: hidden;}/*正面背景*/.front{background-color: white;}/*图标排列*/span{display: block;}/*背面开始为翻转效果  不加则为镜面效果*/.back{transform: rotateY(180deg);background-color: #66512C;}/*背面字体样式*/.back h3{color: #FFFFFF;text-align: center;margin-top: 140px;}/*牌面字体定位*/.number,.bottom_num{font-size: 45px;padding-left: 10px;}.icon,.bottom{font-size: 25px;padding-left: 15px;}.center{font-size: 125px;height: 125px;line-height: 125px;padding-left: 70px;}.bottom,.bottom_num{transform: rotate(180deg);}.red{color: red;}

欢迎和我交流前端方面的知识，一起学习与进步。
希望本文对你有帮助哟！

CSS3 3D变换--扑克牌翻转相关推荐

CSS3:3D变换动画
CSS3:3D变换动画 2D状态下,给元素设置沿着X轴旋转45deg <!DOCTYPE html> <html lang="en"><head> ...
html图片旋转换图片,5. CSS3 transform变换、翻转图片示例
仅供学习,转载请注明出处 CSS3 transform变换 1.translate(x,y) 设置盒子位移 2.scale(x,y) 设置盒子缩放 3.rotate(deg) 设置盒子旋转 4.ske ...
深入理解css3 3d变换
转载地址:https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ ...
css3 3d变换和动画——回顾
1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现. 语法:transform-style: flat | preserve-3d flat 表示所有子元素在2D平面呈现. p ...
html控制弯曲图,html – CSS3 3D弯曲视角
CSS3 3D变换动画非常棒.我想知道是否有办法让某些东西弯曲. 这个例子翻转了(纸质)div,但是动画看起来很僵硬,因为实际上,当你翻动纸张时,它会弯曲一点. 那么我忽略的任何属性,或者是一个让它看 ...
css3 3d翻转效果
css3 3d翻转效果 3d变换 perspective (透视,视角): 属性定义 3D 元素距视图的距离,以像素计.该属性允许您改变 3D 元素查看 3D 元素的视图.决定了你所看到的是2D tr ...
CSS3 3D transform变换
transform的坐标是需要了解的特性. 我们的rotateX,rotateY,rotateZ,和translateX,translateY等都是基于相同的坐标系来定位的. 3D的坐标如下入所示: ...
CSS3中的3D变换与简易立方体的制作
大家好,这里是demo软件园,今天为大家分享的是css3中的3d变换. 我们首先要知道在浏览器中,X轴是从左到右,Y轴是从上到下,Z轴是从里到外.CSS的3d变换中,有以下属性: A.3D旋转: CS ...
CSS3之2D与3D变换
文章出自个人博客https://knightyun.github.io/2019/01/27/css-transform,转载请申明文章目录关于坐标轴 2D变换 translate(x,y) ro ...

CSS3 3D变换--扑克牌翻转

CSS3 3D变换--扑克牌翻转相关推荐

最新文章

热门文章