基于CSS3的3D旋转效果

  自从有了html5和css3,好多以前只能想想的华丽效果都可以上手实现了。3D
转换(个人认为3D变换更贴切^)就是其中之一。关于3D转换,可以阅读CSS3 3D
transform变换,不过如此
,文中对3D转换进行了形象、生动、详细的阐述。在这里,只和大家讨论怎么利用3D转换来实现立体及其旋转效果,例如:

好吧,废话不多说,上代码!

1.页面代码


 1 <div class="translate3D_test">
2 <ul class="cube">
3 <li class="translate3D_li">1</li>
4 <li class="translate3D_li">2</li>
5 <li class="translate3D_li">3</li>
6 <li class="translate3D_li">4</li>
7 <li class="translate3D_li">5</li>
8 <li class="translate3D_li">6</li>
9 </ul>
10 <br/>
11 <a href="#" onclick="return clicka(11)">左</a>
12 <a href="#" onclick="return clicka(12)">右</a>
13 <a href="#" onclick="return clicka(13)">上</a>
14 <a href="#" onclick="return clicka(14)">下</a>
15 <a href="#" onclick="return clicka(1)">1</a>
16 <a href="#" onclick="return clicka(2)">2</a>
17 <a href="#" onclick="return clicka(3)">3</a>
18 <a href="#" onclick="return clicka(4)">4</a>
19 <a href="#" onclick="return clicka(5)">5</a>
20 <a href="#" onclick="return clicka(6)">6</a>
21 <a href="#" onclick="return clicka(0)">复原</a>
22 </div>

2.CSS代码


 1 ul
2 {
3 list-style-type:none;
4 margin:0;
5 padding:0;
6 }
7 li
8 {
9 border:0;
10 }
11 .translate3D_test{
12 position: relative;
13 width:500px;
14 height: 500px;
15 margin:auto;
16 background:#ddd;
17 }
18
19 .translate3D_li{
20 background:#999;
21 font-size:50px;
22 border:1px solid #F15000;
23 }

3.JS代码


  1 $(document).ready(function(){
2 $(".cube").translate3D(400,0,0.5);
3 $("#notcube").translate3D(400,500,0.5);
4 });
5
6 function clicka(who){
7 switch(who)
8 {
9 case 0:
10 $(".cube").transform3D(0);
11 break;
12 case 1:
13 $(".cube").transform3D(1);
14 break;
15 case 2:
16 $(".cube").transform3D(2);
17 break;
18 case 3:
19 $(".cube").transform3D(3);
20 break;
21 case 4:
22 $(".cube").transform3D(4);
23 break;
24 case 5:
25 $(".cube").transform3D(5);
26 break;
27 case 6:
28 $(".cube").transform3D(6);
29 break;
30 case 11: // left
31 $(".cube").transform3D("left");
32 break;
33 case 12: // right
34 $(".cube").transform3D("right");
35 break;
36 case 13: // up
37 $(".cube").transform3D("up");
38 break;
39 case 14: // down
40 $(".cube").transform3D("down");
41 break;
42 default:break;
43 };
44 return false;
45 }
46
47 /*
48 * translate3D 1.0
49 * Copyright (c) 2014 BowenLuo http://www.luobo.com/
50 * Date: 2014-06-04
51 * 基于Html5和CSS3的立体旋转效果实现,支持循环旋转,支持指定面的显示
52 * Example: $(".cube").translate3D(400,0,0.5);//设置类为cube的元素立方体效果,400为长宽高,当第一个参数为0时为正方体效果,0.5为旋转时间,单位为s
53 * $("#notcube").translate3D(400,500,0.5);//设置ID为notcube的元素立方体效果,400为长宽,500为高,0.5为旋转时间,单位为s
54 * $(".cube").transform3D("left");//设置类为cube的立体元素向左旋转90°
55 * $("#notcube").transform3D(5);//设置ID为notcube的立体元素旋转后显示第5个面,即顶部界面
56 * 注意:1.插件需jquery支持,暂时只支持Chrome ,Safari ,Firefox 浏览器;
57 * 2.面元素和元素容器推荐使用div标签,并请确保至少有4个面元素(正方体效果支持6个面,柱体效果支持4个面);
58 * 3.当不为正方体效果或面元素少于6个时,请不要使用上下旋转和显示第5、6个面,以确保良好的用户体验;
59 * 4.在进行旋转动作之前,请设置元素的立体效果(在文档加载完成之后设置)。
60 */
61 (function($){
62 $.fn.translate3D = function(width,height,time){
63 isCube = false;
64 if(height==0){
65 isCube = true;
66 }
67 var thisEle=$(this);
68 if(isCube){
69 $(thisEle).css({"width":width,"height":width,"overflow":"visible"});
70 $(thisEle).children().css({"position": "absolute","width":width,"height":width});
71 }else{
72 $(thisEle).css({"width":width,"height":height,"overflow":"visible"});
73 $(thisEle).children().css({"position": "absolute","width":width,"height":height});
74 }
75 $(thisEle).css({"-webkit-transition":"-webkit-transform "+time+"s linear","-webkit-transform-style":"preserve-3d"});
76 $(thisEle).css({"-moz-transition":"-moz-transform "+time+"s linear","-moz-transform-style":"preserve-3d"});
77 $(thisEle).children().css({"-webkit-backface-visibility":"hidden","-moz-backface-visibility":"hidden"});
78 var mcpara = width/2;
79 var translateZ1 = "translateZ("+mcpara+"px)";
80 var translateZ2 = "rotateY(90deg) translateZ("+mcpara+"px)";
81 var translateZ3 = "rotateY(180deg) translateZ("+mcpara+"px)";
82 var translateZ4 = "rotateY(-90deg) translateZ("+mcpara+"px)";
83 var translateZ5,translateZ6;
84 $(thisEle).children("*:eq(0)").css({"-webkit-transform":translateZ1});
85 $(thisEle).children("*:eq(1)").css({"-webkit-transform":translateZ2});
86 $(thisEle).children("*:eq(2)").css({"-webkit-transform":translateZ3});
87 $(thisEle).children("*:eq(3)").css({"-webkit-transform":translateZ4});
88
89 $(thisEle).children("*:eq(0)").css({"-moz-transform":translateZ1});
90 $(thisEle).children("*:eq(1)").css({"-moz-transform":translateZ2});
91 $(thisEle).children("*:eq(2)").css({"-moz-transform":translateZ3});
92 $(thisEle).children("*:eq(3)").css({"-moz-transform":translateZ4});
93 if(isCube){
94 translateZ5 = "rotateX(90deg) translateZ("+mcpara+"px) " ;
95 translateZ6 = "rotateX(-90deg) translateZ("+mcpara+"px) ";
96 $(thisEle).children("*:gt(5)").css({"display":"none"});
97 $(thisEle).children("*:eq(4)").css({"-webkit-transform":translateZ5});
98 $(thisEle).children("*:eq(5)").css({"-webkit-transform":translateZ6});
99 $(thisEle).children("*:eq(4)").css({"-moz-transform":translateZ5});
100 $(thisEle).children("*:eq(5)").css({"-moz-transform":translateZ6});
101 }else{
102 $(thisEle).children("*:gt(3)").css({"display":"none"});
103 }
104 };
105
106 $.fn.transform3D = function(direction){
107
108 if(typeof(yAngle)!==‘number‘){
109 yAngle = 0;
110 }
111 if(typeof(xAngle)!==‘number‘){
112 xAngle = 0;
113 }
114 var thisEle=$(this);
115 if(typeof(direction)==‘number‘){
116 switch(direction)
117 {
118 case 0:
119 xAngle = 0;
120 yAngle = 0;
121 break;
122 case 1:
123 xAngle = xAngle-xAngle%360;
124 yAngle = yAngle-yAngle%360;
125 break;
126 case 2:
127 xAngle = xAngle-xAngle%360;
128 yAngle = yAngle-yAngle%360-90;
129 break;
130 case 3:
131 xAngle = xAngle-xAngle%360;
132 yAngle = yAngle-yAngle%360-180;
133 break;
134 case 4:
135 xAngle = xAngle-xAngle%360;
136 yAngle = yAngle-yAngle%360+90;
137 break;
138 case 5:
139 xAngle = xAngle-xAngle%360-90;
140 yAngle = yAngle-yAngle%360;
141 break;
142 case 6:
143 xAngle = xAngle-xAngle%360+90;
144 yAngle = yAngle-yAngle%360;
145 break;
146 default:break;
147 };
148 }
149 if(direction==‘left‘){
150 xAngle = xAngle-xAngle%360;
151 yAngle -= 90;
152 }
153 if(direction==‘right‘){
154 xAngle = xAngle-xAngle%360;
155 yAngle += 90;
156 }
157 if(direction==‘up‘){
158 if(xAngle%360==0){
159 xAngle += 90;
160 }else{
161 xAngle += 180;
162 }
163 yAngle = yAngle-yAngle%360;
164 }
165 if(direction==‘down‘){
166 if(xAngle%360==0){
167 xAngle -= 90;
168 }else{
169 xAngle -= 180;
170 }
171 yAngle = yAngle-yAngle%360;
172 }
173 $(thisEle).css("transform","rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)");
174 $(thisEle).css("webkitTransform","rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)");
175 $(thisEle).css("-moz-Transform","rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)");
176 };
177 })(jQuery);

   在线演示

   整个过程可以分为2步,第一步:通过对面元素<li
class="translate3D_li"></li>进行3D变换来搭建立方体;第二步:通过对面元素容器<ul
class="cube"></ul>的3D变换来实现3D立体旋转效果。在搭建立方体时需要注意translateZ的使用,translateZ大小即为立方体中心到该面的垂直距离:

一般为面元素宽的一半。rotateX和roteteY的含义有点类似位置偏移量,要想实现立体旋转效果,还必须设置动作效果transition:transform
2s
linear。而要实现平滑的旋转效果,必须计算好当前偏移量与目标偏移量之间的差值。例如右转90°,需要在原roteteY的基础上加90,即roteteY+=90,而不是roteteY=90。

  上面的js部分,其中注释及以后部分为jquery插件,为了节省时间我全粘贴出来了,哈哈。可以根据需要来进行3D变换。

基于CSS3的3D旋转效果,布布扣,bubuko.com

时间: 06-10

基于CSS3的3D旋转效果的相关文章

一款基于css3的3D图片翻页切换特效

今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="imgdex"> <figure> <img src="arabic-eyes.jpg" alt="Photograph of a woman's face under a Bedouin headress"><

基于css3的3D立方体旋转特效

今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : 在线预览   源码下载 实现的代码. html代码: <div class="wrap"> <div class="box1 box"> 1</div> <div class="box2 box">

基于css3的文字3D翻转特效

一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="component"> <ul class="grid"> <li> <div class="codrops-header"> <h1> Animated Opening Type</h1> </d

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性 从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" clas

Css3动画(一) 如何画3D旋转效果或者卫星围绕旋转效果

如何画3D旋转效果或者卫星围绕旋转效果,当然这个也是工作中的一个任务,我在网上翻了一下,并没有找到类似的东西,所以写下来还是费了一番功夫,因此我把它拿出来记录一下,当然替换了一部分内容.好了,话不多说,进入正题. 我们都知道,浏览器是一个平面的视觉效果,如何在一个平面上看出立体的3D效果呢,其实就是一个视觉差的问题.那我们就从一个平面视觉效果一步一步画出立体的3D效果来.我还是先把效果放出来吧,点击预览(终版) 一.先画出平面视觉上卫星的旋转轨迹 卫星的轨迹一般都是圆的或者椭圆的,我们就先以一个

基于 Android 的 3D 视频样本代码

作者:Mark Liu 下载样本代码 简介 在Android 中,创建一个能够播放视频剪辑的应用非常简单:创建一个采用 3D 图形平面的游戏应用也非常简单.但是,创建一个能够在 3D 图形对象上播放视频的应用却不容易.本文介绍了我为应对该挑战创建的应用.该应用可在 3D 平面上渲染视频,并支持用户以交互的方式在视频平面上播放. 该应用需要解决三大实施问题: 如何构建代码以支持用户在播放视频时变更 3D 平面? 虽然 Android 中默认的 MediaPlayer 配备了全面的播放操作,但是难以

基于 Android 的 3D 视频示例代码

笔者:Mark Liu 下载样本代码 简单介绍 在Android 中,创建一个可以播放视频剪辑的应用很easy:创建一个採用 3D 图形平面的游戏应用也很easy.可是,创建一个可以在 3D 图形对象上播放视频的应用却不easy. 本文介绍了我为应对该挑战创建的应用. 该应用可在 3D 平面上渲染视频,并支持用户以交互的方式在视频平面上播放. 该应用须要解决三大实施问题: 怎样构建代码以支持用户在播放视频时变更 3D 平面? 尽管 Android 中默认的 MediaPlayer 配备了全面的播

基于CSS3鼠标经过立体翻转切换特效

基于CSS3鼠标经过立体翻转切换特效.这是一款基于jQuery+CSS3实现的鼠标经过封面和详情3D翻转切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrapbox YaHei"> <div class="cont-box"> <div class="regularly-box"> <div class="regularly-head&qu

Arctext.js - 基于 CSS3 &amp; jQuery 的文本弯曲效果

Arctext.js 是基于 Lettering.js 的文本旋转插件,根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布.虽然 CSS3 也能够实现字符旋转效果,但是要让安排每个字母都沿着弯曲路径排布相当的复杂,结合 Arctext.js 则可以轻松实现这个效果. 效果演示     插件下载 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!12款优秀的 j