本篇内容主要讲解“css3怎么实现3 d色子翻转特效”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3怎么实现3 d色子翻转特效”吧!
css3使我们能够跳出二维空间,实现3维空间的动画效果,这里给出一个自动翻转的3 d色子动画效果制作过程。
第一步,首先进行HTML的布局,对于3 d效果,布局有一定的规律,代码如下:
代码如下:
& lt; body>
& lt; div id=皁uter"在
,,& lt; div id=癵roup"在
,,,类,& lt; div=皃age"id=皃age1"祝辞。;/div>
,,,类,& lt; div=皃age"id=皃age2"祝辞。& lt;/div>
,,,类,& lt; div=皃age"id=皃age3"祝辞…& lt;/div>
,,,类,& lt; div=皃age"id=皃age4"祝辞.... & lt;/div>
,,,类,& lt; div=皃age"id=皃age5"祝辞..... & lt;/div>
,,,类,& lt; div=皃age"id=皃age6"祝辞……& lt;/div>
,,& lt;/div>
& lt;/div>
& lt;/body>
在身体中定义一个叫做外部的div,它是最外层的div,用来提供一个3 d场景,可以认为它是一个3 d图形的展示平台,只有定义了这样一个div,才能够展示3 d图形,此外定义一个类为集团的div,用来盛放色子的六个平面,将它们组合在一起。最后再定义6个平行的div,表示色子的六个平面。
第二步,定义三维场景的css,代码如下:
代码如下:
#外{
,,,,,/*定义视距*/
,,,,,-webkit-perspective: 500 px;
,,,,,-WebKit-perspective-origin: 50% - 50%;
,,,,,-moz-perspective: 500 px;
,,,,,-moz-perspective-origin: 50% - 50%;
,,,,,溢出:隐藏的;
,,,}
这里的透视表示的是透过这个三维场景看到里面的三维效果的距离,值越大看到的效果越远,值越小,看到的效果越近.perspective-origin表示的是相对于浏览器哪个角度去观察三维图形,第一个参数表示X轴方向,第二个参数表示Y轴方向,可以使用单位值px,也可以使用百分比。为了达到兼容ff和chrome的目的,所以给相应的CSS名称前加上moz和WebKit前缀。这里有必要说一下css3中的坐标定义,如下:
在css3中,X轴正方向向右,Y轴正方向向下,Z轴正方向由屏幕内伸向屏幕外,这和立体几何中的坐标系定义不同。
第三步,为id为组的div设置CSS属性,这个div主要是将色子的6个平面组合在一起,便于定义整体动画效果,代码如下:
代码如下:
#组{
,,,,,宽度:200 px;
,,,,,身高:200 px;
,,,,,位置:相对;
,,,,,-webkit-transform-style: preserve-3d;
,,,,,-moz-transform-style: preserve-3d;
,,,,,保证金:200 px汽车;
,,,}
这里定义了该div的宽高,并定义其位置为相对,便于其中的六个平面相对于这个div进行绝对定位,同时传输格式:preserve-3d这个属性告诉浏览器,所有变换变换都是在3 d空间中的变换,而不是在二维空间中,同样为了兼容加上了前缀。
第四步,定义每个平面div的通用页面属性,即每个色子平面共同的CSS属性,代码如下:
代码如下:
。{
,页,,,,宽度:200 px;
,,,,,身高:200 px;
,,,,,位置:绝对的,
,,,,,border - radius: 20 px;
,,,,,text-align:中心;
,,,,,粗细:大胆的;
,,,,,透明度:0.5;
,,,,,溢出:隐藏的;
,,,,,过滤器:α(不透明度=50);
,,,,,字体大小:150 px;
,,,,,单词分割:打破所有;
,,,,,自动换行:break-word;
,,,}
这里定义了每个平面的宽高和其父div组织的宽高相同,进行绝对定位,(只有绝对定位了,让其脱离文档流,才能够应用transform3D变换效果,否则只能在2 d空间变换),需要说明的是单词分割:打破所有;自动换行:break-word;这两句
第五步,定义每个平面的div的CSS属性
第一个平面:
代码如下:
# page1 {
background - color: # 10 a6ce;
行高:100 px;
}
为了区分每个平面,显示出3 d效果,这里需要将相邻的div进行不同背景色的设置,第一个div默认位于XY平面,不作变换
第二个平面:
代码如下:
所以page2 # {
,,,,,background - color: # 0073 b3;
,,,,,-webkit-transform-origin:正确的;
,,,,,-webkit-transform: rotateY(-90度),
,,,,,-moz-transform-origin:正确的;
,,,,,-moz-transform: rotateY(-90度),
,,,,,行高:100 px;
,,,}
这里使用transform-origin来定义该平面以哪个边开始进行变换,这里以最右边的边沿着Y轴绕行-90度,同样为了兼容加上了前缀
