css3扑克牌旋转源码

最新推荐文章于 2024-04-22 15:22:18 发布
最新推荐文章于 2024-04-22 15:22:18 发布
阅读量1.7k 收藏
点赞数
分类专栏： CSS3 文章标签： css div scroll class 360 float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/appteam_vlctech/article/details/7657146
版权

css3示例参考:http://www.webkit.org/blog-files/3d-transforms/poster-circle.html

<html>

<head>
<style>
*{
padding:0px;
margin:0px;
}
ul,li{
list-style:none;
}
.bg{
-moz-box-align: center;
-moz-box-pack: center;
display: -moz-box;
-webkit-box-align: center;
-webkit-box-pack: center;
display: -webkit-box;
height: 100%;
width: 100%;
-webkit-perspective: 6000;
-webkit-perspective-origin: 50% 50%;
}
.content{
-webkit-transform-style: preserve-3d;
-webkit-animation:rotateContent 6s linear infinite;
}
@-webkit-keyframes rotateContent{
0%{
-webkit-transform: rotateX(0deg) rotateZ(15deg);
}
25%{
-webkit-transform: rotateX(90deg) rotateZ(30deg);
}
50%{
-webkit-transform: rotateX(180deg) rotateZ(45deg);
}
75%{
-webkit-transform: rotateX(270deg) rotateZ(30deg);
}
100%{
-webkit-transform: rotateX(360deg) rotateZ(15deg);
}
}
.content div{
position: relative;
height: 120px;
-webkit-transform-style: preserve-3d;
}
.content div:nth-child(odd){
-webkit-animation:invertRotateDiv 4s linear infinite;
}
.content div:nth-child(even){
-webkit-animation:clockwiseRotateDiv 4s linear infinite;
}
@-webkit-keyframes invertRotateDiv{
0%{
-webkit-transform: rotateY(0deg);
}
25%{
-webkit-transform: rotateY(90deg);
}
50%{
-webkit-transform: rotateY(180deg);
}
75%{
-webkit-transform: rotateY(270deg);
}
100%{
-webkit-transform: rotateY(360deg);
}
}
@-webkit-keyframes clockwiseRotateDiv{
0%{
-webkit-transform: rotateY(0deg);
}
25%{
-webkit-transform: rotateY(-90deg);
}
50%{
-webkit-transform: rotateY(-180deg);
}
75%{
-webkit-transform: rotateY(-270deg);
}
100%{
-webkit-transform: rotateY(-360deg);
}
}
.content ul{

}
.content li{
background: none repeat scroll 0 0 rgba(243, 179, 179, 0.8);
float: left;
font-size: 30px;
height: 100px;
line-height: 100px;
margin: 10px;
text-align: center;
width: 100px;
position: absolute;
border-radius: 10px;
}
.content li:nth-child(odd){
background: none repeat scroll 0 0 rgba(152, 145, 244, 0.8);
}
.content div li:nth-child(1){
-webkit-transform: rotateY(0deg) translateZ(200px) ;
}
.content div li:nth-child(2){
-webkit-transform: rotateY(30deg) translateZ(200px) ;
}
.content div li:nth-child(3){
-webkit-transform:rotateY(60deg) translateZ(200px) ;
}
.content div li:nth-child(4){
-webkit-transform: rotateY(90deg) translateZ(200px) ;
}
.content div li:nth-child(5){
-webkit-transform: rotateY(120deg) translateZ(200px) ;
}
.content div li:nth-child(6){
-webkit-transform: rotateY(150deg) translateZ(200px) ;
}
.content div li:nth-child(7){
-webkit-transform: rotateY(180deg) translateZ(200px) ;
}
.content div li:nth-child(8){
-webkit-transform: rotateY(210deg) translateZ(200px) ;
}
.content div li:nth-child(9){
-webkit-transform: rotateY(240deg) translateZ(200px) ;
}
.content div li:nth-child(10){
-webkit-transform: rotateY(270deg) translateZ(200px) ;
}
.content div li:nth-child(11){
-webkit-transform: rotateY(300deg) translateZ(200px) ;
}
.content div li:nth-child(12){
-webkit-transform: rotateY(330deg) translateZ(200px);
}
</style>
</head>
<body>
<div class="bg">
<div class="content">
<div>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
</div>
<div>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
</div>
<div>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
</div>
</div>
</div>
</body>
</html>
appteam_vlctech
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5+CSS3 精美登陆界面源码
01-19
3个很精美的登陆界面，全都是用HTML5+CSS3开发的，所以可能不适合低版本IE浏览器。大家可以下来看看，做的超级漂亮的。
扑克牌的轴心旋转
ln201009的博客
11-17 454
1、首先，我们先进入DW里面新建一个html文档，改一下title为扑克牌的轴心旋转，在body里面写一个div命名为pkbox用于放置扑克图片，然后在里面放置img标签，引入两张红黑的扑克再复制成为六个。 2、新建一个css文档命名为pk 然后返回html文档使用link标签引入css样式表。 3、现在css样式表里面写上通配符，设置margin，padding值为0；现在的基本效果就是图二。（以下所有的图二都是我缩小了页面的效果） 4、给类名为pkbox这个盒子设置
CSS3 3D变换--扑克牌翻转
babybabyyu的博客
07-14 2027
CSS3 3D变换–扑克牌翻转 首先给出最终效果图： 鼠标移入翻转页面时的效果： 下面来具体实现，和我一起试试吧！ 思路： 首先写出牌面的文字和结构，在设置牌面的变换时，将变换的牌正面和背面放在一个父容器里，即需要四个父容器，这四个容器可以放在一个大的div里。 最后采用层定位让牌面的正面和背面有一个叠加的效果。先显示图片，当鼠标悬停时产生3D变换，于是显示牌的背面。 主页文件的基本结构如下： <div id="card"> <div class="box">
html5超炫魔术扑克牌动画特效
06-12
html5超炫魔术扑克牌动画特效是一款效果非常棒的魔术扑克牌变换特效。
用transform的旋转功能作出扑克牌旋转功能
weixin_48047636的博客
04-20 255
CSS <style> /* 给外层盒子设置宽高边框和盒盒间距 */ .wrap{ width: 206px; height: 289px; border: 1px solid salmon; margin: 200px auto; position: relative; } .wrap i
html+css制作扑克牌/小胡桃展开特教
热门推荐
知而好问，然后能才
07-09 1万+
html+css制作扑克牌/小胡桃展开特效
扑克牌旋转
shi_jia233的博客
10-27 791
1打开DW，CTRL+n新建一个html 2在html和body里加上div，div里加上扑克牌图片 3然后title下加上style给div里的图片设置属性绝对定位和左偏移上偏移和图片的高 再加上旋转角 上右 旋转时间 4给鼠标移入后的每张扑克牌设置角度 角度可以不是固定的但是一样的角度看不出太好的效果上面的旋转时间鼠标移出后也是收回时间。 5鼠标未移入 移入后的效果 ...
纸牌翻转（html+css）
llvyeriji的博客
05-16 1921
以下为 html 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>塔罗牌动画</title> <link rel="stylesheet" href="style/style.css"> </head> <body> <div> <img class="ka01" src="i...
CSS3扑克牌悬停翻转特效
07-24
CSS3扑克牌悬停翻转特效是一款基于css3 transform属性实现的扑克牌悬停翻转动画特效。
CSS3扑克牌悬停翻转特效特效代码
03-20
CSS3扑克牌悬停翻转特效是一款基于css3 transform属性实现的扑克牌悬停翻转动画特效。
纯CSS实现扑克牌效果
09-05
纯CSS实现扑克牌效果，太牛了吧？开始我还以为是一张图片呢，后来发现代码里没有调用任何图片，顿时有点诧异，CSS果然很牛，或是作者水平比较牛？
扑克牌旋转效果
06-15
完美的扑克牌旋转，简单实用。供ActionScript爱好者实用
css3扑克牌展开折叠动画特效
06-11
css3扑克牌展开折叠动画特效是一款css3 svg制作的点击卡牌展开和收起动画效果。
css3扑克卡片随机翻转特效
07-24
css3扑克卡片随机翻转特效是一款点击扑克牌正反面随机翻转扑克牌动画特效。
常见的css面试题（持续更新，欢迎补充）
清浅就是我的博客
04-22 456
总结面试常问的css相关面试题~通常遇见margin塌陷，是我们同时给父子元素都设置的margin， 此时元素不会像我们想的那样撑开，而是选取最大margin去显示。如何解决这个问题呢？ 给父元素设置浮动给父元素设置：overflow：hidden给元素设置为绝对定位一般来说：行内样式> id选择器 > class选择器 > 类型（标签）选择器和伪元素选择器 > 属性选择器.当上述只有一个的时候，很明显就能看出来谁的优先级高， 但是当同时存在id选择器 、 class选择器 、标签选择器 、 属
【CSS】使用 scroll snap 实现页面的垂直大屏滚动
最新发布
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-22 453
CSS 属性 scroll-snap-type 设置了在有滚动容器的情形下吸附至吸附点的严格程度。使用也可以用于垂直滚动，全屏展示就是一个很好的例子
CSS系列:伪类选择器小记
浪潮行舟_chenjin2136
04-19 792
组合选择器的使用有助于保持HTML代码的语义化，因为它们允许开发者基于元素之间的自然关系来应用样式，而不是强迫添加额外的类或ID。这种做法增加了样式的可复用性，因为相同的组合选择器样式可以在不同的HTML结构中被复用，只要这些结构符合选择器定义的元素关系。组合选择器在CSS中扮演着至关重要的角色，它们提供了一种强大的机制来选择具有特定关系的元素，从而允许开发者以更精细、更具体的方式应用样式。使用伪元素可以在不增加额外HTML元素的情况下实现复杂的设计，这有助于减少DOM的大小，从而提高网页的性能。
CSS实现文本渐变色
JCM_ZZ的博客
04-19 347
【代码】CSS实现文本渐变色。
CSS3制作扑克牌展开动画
05-27
3. 使用CSS3的transform属性来实现扑克牌的旋转、位移等动画效果。例如，可以使用rotateX将扑克牌翻转至正面朝上，然后使用translateX将扑克牌向右移动，再通过translateZ将扑克牌向屏幕内移动，形成3D效果。 4. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值