您现在的位置是:网站首页> 编程资料编程资料
一款基于css3麻将筛子3D翻转特效的实例教程CSS实现卡片3D翻转效果的示例代码css3实现3D色子翻转特效css3的图形3d翻转效果应用示例简单几步用纯CSS3实现3D翻转效果
2021-09-06
835人已围观
简介 这篇文章主要为大家介绍了一款基于css3麻将筛子3D翻转特效的实例教程,css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程
css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程。
第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下:
- <body>
- <div id="outer">
- <div id="group">
- <div class="page" id="page1">.div>
- <div class="page" id="page2">..div>
- <div class="page" id="page3">...div>
- <div class="page" id="page4">....div>
- <div class="page" id="page5">.....div>
- <div class="page" id="page6">......div>
- div>
- div>
- body>
在body中定义一个叫做outer的div,它是最外层的div,用来提供一个3D场景,可以认为它是一个3D图形的展示平台,只有定义了这样一个div,才能够展示3D图形,此外定义一个class为group的div,用来盛放色子的六个平面,将它们组合在一起。最后再定义6个平行的div,表示色子的六个平面。
第二步,定义三维场景的css,代码如下:
- #outer{
- /*定义视距*/
- -webkit-perspective:500px;
- -WebKit-perspective-origin: 50% 50%;
- -moz-perspective:500px;
- -moz-perspective-origin: 50% 50%;
- overflow: hidden;
- }
这里的perspective表示的是透过这个三维场景看到里面的三维效果的距离,值越大看到的效果越远,值越小,看到的效果越近。perspective-origin表示的是相对于浏览器哪个角度去观察三维图形,第一个参数表示X轴方向,第二个参数表示Y轴方向,可以使用单位值px,也可以使用百分比。为了达到兼容ff和chrome的目的,所以给相应的CSS名称前加上moz和WebKit前缀。这里有必要说一下css3中的坐标定义,如下:
在css3中,X轴正方向向右,Y轴正方向向下,Z轴正方向由屏幕内伸向屏幕外,这和立体几何中的坐标系定义不同。
第三步,为id为group的div设置css属性,这个div主要是将色子的6个平面组合在一起,便于定义整体动画效果,代码如下:
- #group{
- width: 200px;
- height: 200px;
- position: relative;
- -webkit-transform-style:preserve-3d;
- -moz-transform-style:preserve-3d;
- margin: 200px auto;
- }
这里定义了该div的宽高,并定义其position为relative,便于其中的六个平面相对于这个div进行绝对定位,同时transform-style:preserve-3d这个属性告诉浏览器,所有transform变换都是在3D空间中的变换,而不是在2D空间中,同样为了兼容加上了前缀。
第四步,定义每个平面div的通用page属性,即每个色子平面共同的CSS属性,代码如下:
- .page{
- width: 200px;
- height: 200px;
- position: absolute;
- border-radius: 20px;
- text-align: center;
- font-weight: bold;
- opacity: 0.5;
- overflow: hidden;
- filter:alpha(opacity=50);
- font-size:150px;
- word-break:break-all;
- word-wrap:break-word;
- }
这里定义了每个平面的宽高和其父div group的宽高相同,进行绝对定位,(只有绝对定位了,让其脱离文档流,才能够应用transform3D变换效果,否则只能在2D空间变换),需要说明的是word-break:break-all;word-wrap:break-word;这两句
第五步,定义每个平面的div的CSS属性
第一个平面:
- #page1{
- background-color: #10a6ce;
- line-height: 100px;
- }
为了区分每个平面,显示出3D效果,这里需要将相邻的div进行不同背景色的设置,第一个div默认位于XY平面,不作变换
第二个平面:
- #page2{
- background-color: #0073b3;
- -webkit-transform-origin:rightright;
- -webkit-transform:rotateY(-90deg);
- -moz-transform-origin:rightright;
- -moz-transform:rotateY(-90deg);
- line-height: 100px;
- }
这里使用transform-origin来定义该平面以哪个边开始进行变换,这里以最右边的边沿着Y轴绕行-90度,同样为了兼容加上了前缀
第三个平面:
- #page3{
- background-color: #07beea;
- -webkit-transform-origin:left;
- -webkit-transform:rotateY(90deg);
- -moz-transform-origin:left;
- -moz-transform:rotateY(90deg);
- line-height: 80px;
- }
第四个平面:
- #page4{
- background-color: #29B4F0;
- -webkit-transform-origin:top;
- -webkit-transform:rotateX(-9
相关内容
- CSS Grid布局教程之网格单元格布局CSS Grid布局教程之浏览器开启CSS Grid Layout汇总CSS Grid布局教程之什么是网格布局使用CSS Grid布局实现网格的流动css 限定GridView宽度并加上滚动条YUI 中的 Grids CSS值得关注和学习的-CSS教程-网页制作-网页教学网5分钟教你学会 CSS Grid 布局
- CSS Grid布局教程之浏览器开启CSS Grid Layout汇总CSS Grid布局教程之网格单元格布局CSS Grid布局教程之什么是网格布局使用CSS Grid布局实现网格的流动css 限定GridView宽度并加上滚动条YUI 中的 Grids CSS值得关注和学习的-CSS教程-网页制作-网页教学网5分钟教你学会 CSS Grid 布局
- CSS Grid布局教程之什么是网格布局CSS3中的display:grid,网格布局介绍js和CSS3实现带详情页面的炫酷网格布局特效CSS Grid 网格布局全解析CSS网格布局的示例代码在CSS网格布局中的列中填充项目的实现方法
- 使用CSS Grid布局实现网格的流动CSS Grid布局教程之网格单元格布局CSS Grid布局教程之浏览器开启CSS Grid Layout汇总CSS Grid布局教程之什么是网格布局css 限定GridView宽度并加上滚动条YUI 中的 Grids CSS值得关注和学习的-CSS教程-网页制作-网页教学网5分钟教你学会 CSS Grid 布局
- 纯css3制作网站后台管理面板ai怎么使用CSS属性面板?Dreamweaver中CSS面板该怎么设置?CSS 实现侧滑显示留言面板的网页组件功能
- 浅谈合理架构CSS纯CSS实现家谱树 组织架构树同理 代码分享我的css架构理念—因人而异 没有最优 只有适合
- CSS Sprite从大图中截取小图完整教程css sprites把很多小图集成在一张图片上CSS Sprites 样式生成工具 3.0CSS Sprites简介以及优缺点使用CSS sprite 的好处和坏处分析什么是CSS Sprites(图片合并)技术 图文介绍CSS Sprites详解css sprites技术 CSS Sprites图片切割术与图片优化深入理解浅谈CSS Sprites切图技术
- CSS制作清爽绿色格调图文box通用样式CSS 网页图文混排的10个技巧CSS 网页布局中的图文列表实现代码javascript+CSS 联合打造图文结合动感菜单div css图文混排列表设计中的基础问题总结
- 一款纯css3实现的鼠标悬停动画按钮纯CSS3实现的鼠标悬停图标旋转导航动画特效源码纯css3实现的鼠标悬停背景翻转动画导航特效源码一款纯CSS3实现的鼠标悬停动画按钮集合特效源码 HTML5+CSS3实现的鼠标悬停动画菜单按钮特效源码 纯css3实现的鼠标悬停动画按钮一款基于CSS3实现的鼠标悬停图片动画及多种文字动画效果源码31款纯css3实现的鼠标悬停动画效果源码纯CSS3实现的鼠标悬停图片文字动画效果源码CSS3鼠标悬停动画显示文字特效源码
- 一款纯css3制作的2015年元旦雪人动画特效教程css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
点击排行
本栏推荐
