您现在的位置是:网站首页> 编程资料编程资料

一款基于css3麻将筛子3D翻转特效的实例教程CSS实现卡片3D翻转效果的示例代码css3实现3D色子翻转特效css3的图形3d翻转效果应用示例简单几步用纯CSS3实现3D翻转效果

2023-10-24 279人已围观

简介 这篇文章主要为大家介绍了一款基于css3麻将筛子3D翻转特效的实例教程,css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程

  css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程。

  第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下:

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2. <div id="outer">  
  3.     <div id="group">  
  4.         <div class="page" id="page1">.div>  
  5.         <div class="page" id="page2">..div>  
  6.         <div class="page" id="page3">...div>  
  7.         <div class="page" id="page4">....div>  
  8.         <div class="page" id="page5">.....div>  
  9.         <div class="page" id="page6">......div>  
  10.   
  11.     div>  
  12.   
  13. div>  
  14. body>  

   在body中定义一个叫做outer的div,它是最外层的div,用来提供一个3D场景,可以认为它是一个3D图形的展示平台,只有定义了这样一个div,才能够展示3D图形,此外定义一个class为group的div,用来盛放色子的六个平面,将它们组合在一起。最后再定义6个平行的div,表示色子的六个平面。

  第二步,定义三维场景的css,代码如下:

CSS Code复制内容到剪贴板
  1. #outer{   
  2.            /*定义视距*/  
  3.            -webkit-perspective:500px;   
  4.            -WebKit-perspective-origin: 50% 50%;   
  5.   
  6.            -moz-perspective:500px;   
  7.            -moz-perspective-origin: 50% 50%;   
  8.   
  9.            overflowhidden;   
  10.        }  

  这里的perspective表示的是透过这个三维场景看到里面的三维效果的距离,值越大看到的效果越远,值越小,看到的效果越近。perspective-origin表示的是相对于浏览器哪个角度去观察三维图形,第一个参数表示X轴方向,第二个参数表示Y轴方向,可以使用单位值px,也可以使用百分比。为了达到兼容ff和chrome的目的,所以给相应的CSS名称前加上moz和WebKit前缀。这里有必要说一下css3中的坐标定义,如下:

   

  在css3中,X轴正方向向右,Y轴正方向向下,Z轴正方向由屏幕内伸向屏幕外,这和立体几何中的坐标系定义不同。

  第三步,为id为group的div设置css属性,这个div主要是将色子的6个平面组合在一起,便于定义整体动画效果,代码如下:

C# Code复制内容到剪贴板
  1. #group{   
  2.             width: 200px;   
  3.             height: 200px;   
  4.             position: relative;   
  5.             -webkit-transform-style:preserve-3d;   
  6.   
  7.             -moz-transform-style:preserve-3d;   
  8.             margin: 200px auto;   
  9.   
  10.         }  

    这里定义了该div的宽高,并定义其position为relative,便于其中的六个平面相对于这个div进行绝对定位,同时transform-style:preserve-3d这个属性告诉浏览器,所有transform变换都是在3D空间中的变换,而不是在2D空间中,同样为了兼容加上了前缀。

  第四步,定义每个平面div的通用page属性,即每个色子平面共同的CSS属性,代码如下:

CSS Code复制内容到剪贴板
  1. .page{   
  2.            width200px;   
  3.            height200px;   
  4.            positionabsolute;   
  5.            border-radius: 20px;   
  6.            text-aligncenter;   
  7.            提示: 本文由整理自网络,如有侵权请联系本站删除!
    本站声明:
    1、本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持;
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途;否则由此产生的法律后果,本站概不负责!

-六神源码网