用transform的旋转功能作出扑克牌旋转功能

最新推荐文章于 2023-04-08 14:37:00 发布
最新推荐文章于 2023-04-08 14:37:00 发布
阅读量278 收藏 2
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48047636/article/details/124295735
版权
本文通过CSS3的transform属性详细介绍了如何实现鼠标移入图片时，使其呈现出类似扑克牌旋转的动态效果。包括使用HTML构建基本结构，以及CSS样式设置来完成旋转动画。
摘要由CSDN通过智能技术生成

CSS

<style>
        /* 给外层盒子设置宽高边框和盒盒间距 */
        .wrap{
   
            width: 206px;
            height: 289px;
            border: 1px solid salmon;
            margin: 200px auto;
最低0.47元/天 解锁文章
riverrun_z
关注
扑克牌的轴心旋转
ln201009的博客
11-17 521
1、首先，我们先进入DW里面新建一个html文档，改一下title为扑克牌的轴心旋转，在body里面写一个div命名为pkbox用于放置扑克图片，然后在里面放置img标签，引入两张红黑的扑克再复制成为六个。 2、新建一个css文档命名为pk 然后返回html文档使用link标签引入css样式表。 3、现在css样式表里面写上通配符，设置margin，padding值为0；现在的基本效果就是图二。（以下所有的图二都是我缩小了页面的效果） 4、给类名为pkbox这个盒子设置
扑克牌旋转
娓娓道来
07-28 1402
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } ...
CSS3：过渡动画及关键帧动画-案例一：扑克牌的翻转
BadType的博客
03-18 1123
一、过渡动画及关键帧动画 本文大致介绍了CSS3中的技术之一：动画，因为我也是学习者，这只是我自己的观点，如有错误，请指出。废话不多说，开始步入正题： 想必大家都看过动画片：猫和老鼠，其剧情幽默轻松，让人印象深刻。就像灰太狼永远都吃不到羊，汤姆也斗不过杰瑞。那么这么好看的动画片是怎么拍出来的呢？是直接实拍吗？想必大家都没深究。今天就讲讲这些动画是怎么呈现在我们面前的。 我们所看到的动画是一帧一帧的画面，当连起来播放，就是一个完整的动画了。那么CSS3中的动画是什么呢？CSS3中的动画是使元素从一种样式逐渐变
HTML5+原生javascript 卡片扑克旋转展开效果demo
CodingNoob
03-11 1900
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5+原生javascript 卡片扑克旋转展开效果demo</title> <style> *{margin:0;padding:0;} body{background:#ccc;padding-t
用css实现扑克牌，图片的翻转效果
qq_44760912的博客
10-18 2594
用css实现扑克牌，图片的翻转效果 话不多说，直接上代码！ 1.实现商品图片的翻转以及信息的展示（下面代码仅是个人想要效果的HTML代码，所有的class名称可根据自身需求进行改动） <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title&gt...
css3扑克牌翻转,CSS3 回旋的扑克牌
weixin_35775446的博客
08-04 376
CSS语言：CSSSCSS确定html, body {height: 100%; }body {overflow: hidden;background: black; }.wrap {position: relative;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-perspective: 30...
html5超炫魔术扑克牌动画特效
06-12
CSS3提供了许多新的选择器和属性，如transform（变换）、transition（过渡）和animation（动画），这些都可以用来实现扑克牌的翻转、旋转等动态效果。 `js`目录中的脚本文件是整个动画的核心。开发者可能使用了...
18张扑克牌旋转_161211demo
12-11
标题“18张扑克牌旋转_161211demo”表明这是一个关于使用CSS3技术实现18张扑克牌动态旋转效果的示例项目。描述中的“js&&cs”暗示了这个效果可能结合了JavaScript和CSS来完成，而链接指向的简书文章可能提供了更详细...
css3扑克牌展开折叠动画特效
06-11
在本文中，我们将深入探讨如何使用CSS3和SVG技术创建一款独特的扑克牌展开与折叠动画特效。这个特效为用户提供了互动式的视觉体验，使得网页设计更加生动有趣。 首先，我们来了解一下CSS3（Cascading Style Sheets ...
jQuery css3扑克洗牌和扑克牌翻转效果代码
11-17
jQuery css3扑克洗牌和扑克牌翻转效果代码 jQuery css3扑克洗牌和扑克牌翻转效果代码 jQuery css3扑克洗牌和扑克牌翻转效果代码
css实现扑克牌翻转效果
最新发布
11-30
css实现简单的扑克牌翻转效果
css3卡牌炫酷3d排列展示_CSS3卡牌旋转滑动效果
weixin_33498603的博客
12-23 567
这个 CSS3 类似于幻灯片旋转的效果，是一个比较有意思并且比较受欢迎的特效。之前没有去研究过，无意在博客上看到Wenzi 写了这个东西，来看看他的代码是怎么实现的。CSS 定位还是比较简单的，使用绝对定位加上 z-index 就能够实现上面的效果。要想改变幻灯片的位置，有三点：位置、大小、层次。看起来像是 div 进行了移动，实际上并没有，只是切换了每个元素的 class，于是幻灯片就发生了翻...
html 如何制作翻牌效果,CSS3实现翻牌旋转效果
weixin_42515089的博客
06-03 634
HtmlCssJs正面 背景可以透明反面 背景可以透明反面内容body,div{margin:0;padding:0;background:teal;}.flip_wrap{display: inline-block;width:300px;height:220px;margin:50px;perspective:800px;/*perspective属性定义3D元素距视图的距离,以像素计。该属性...
transform扑克牌旋转
maxiaoxin1314的博客
05-07 393
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>扑克旋转</title> <style> *{ margin: 0; padding:...
css3翻牌效果
LG20091570的博客
12-09 1289
css3 翻牌 *{ margin:0; padding:0;} ul,li{ list-style:none; margin:0; padding:0;} .brandsShow{ width:1200px; height:620px; margin:0 auto; } .brandsShow ul{ margin-left:-20px; width:1225px; heig
常见经典动效实现总结（老虎机、打字机、纸牌翻转等等）
别告诉我有Bug
04-08 3274
常见动效老虎机、打字机、纸牌翻转等等效果实现 1、老虎机 2、打字机 3、纸牌翻转 4、水波纹
2021-11-22 transform属性的用法和示例,使用transform属性实现扑克牌的正反面翻转,transition属性的用法和示例,
GAARA
11-22 293
文章目录 零.transform的用法 1.属性值translate:转换 2.属性值scale:缩放 3,属性值rotate:旋转 4.属性值skew:倾斜 一.示例:点击翻转扑克牌正反面 1. 注意事项 2.完整代码 3.知识点 3.1.transition属性用于设置元素的过渡效果 3.2.div:hover #one还是div #one:hover? 二.改进:在js中调用元素的transform属性 1.css样式不变,除了hover部分 2..完整代码 3.图片资源 back.png front
html制作两张扑克牌，一张绕x轴旋转，一张绕y轴旋转
06-01
好的，下面是HTML代码： ```html <!DOCTYPE html> <html> <head> <title>旋转扑克牌</title> <style> .card { width: 100px; height: 150px; position: relative; perspective: 800px; margin: 50px; } .card .front, .card .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; box-sizing: border-box; border: 1px solid black; padding: 10px; font-size: 24px; text-align: center; line-height: 130px; } .card .front { background-color: white; transform: rotateX(0deg); z-index: 2; } .card .back { background-color: lightgray; transform: rotateX(180deg); z-index: 1; } .card.rotate-x { animation: rotate-x 2s infinite alternate; } .card.rotate-y { animation: rotate-y 2s infinite alternate; } @keyframes rotate-x { from { transform: rotateX(0deg); } to { transform: rotateX(360deg); } } @keyframes rotate-y { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } </style> </head> <body> <div class="card rotate-x"> <div class="front">A♠</div> <div class="back"></div> </div> <div class="card rotate-y"> <div class="front">K♥</div> <div class="back"></div> </div> </body> </html> ``` 解释一下代码： 1. 首先定义了一个名为 `.card` 的样式，表示扑克牌。设置了宽度、高度、相对定位、透视距离等属性。 2. `.card` 中有两个子元素，分别是 `.front` 和 `.back`，表示扑克牌的正面和背面。设置了绝对定位、宽度、高度、背面可见性、边框、内边距、字体大小、文本居中等属性。 3. `.front` 和 `.back` 的 `transform` 属性分别设置了绕 X 轴和 Y 轴旋转的角度。 4. `.card.rotate-x` 和 `.card.rotate-y` 分别表示绕 X 轴和 Y 轴旋转的动画。使用了 `@keyframes` 关键字定义动画。动画的名称为 `rotate-x` 和 `rotate-y`，分别设置了起始和结束状态的 `transform` 属性。 5. 在 HTML 中创建了两个 `.card` 元素，一个使用了 `.rotate-x` 类，一个使用了 `.rotate-y` 类，分别表示绕 X 轴和 Y 轴旋转的扑克牌。 注意，为了让旋转效果更明显，我们在 `.card` 中设置了边框和内边距。如果不需要边框和内边距，可以将这两个属性去掉。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值