HTML5 CSS3 诱人的实例： 3D立方体旋转动画
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/34120047
创意来自：http://www.html5tricks.com/demo/html5-3d-cube/index.html ， 同学给我发的例子，感觉很不错，不过实在想不出来实际的用处，但是效果很炫~
效果图：
知识点：
1、perspective ，transform 的复习
2、css3 backgroud实现格格背景，即面上的小格格
3、 @-webkit-keyframes 实现动画
HTML：
<body> <div class="stage">
<div class="cube">
<div class="font"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</div> </div> </body>
前面的3D商品展示中已经说过如何制作正方体，并且那个上面还有数字，理论上说比这个复杂，虽然木有这个炫~这里就不多说了。
CSS：
html
{
background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);
background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);
height: 100%;
} .stage
{
-webkit-perspective: 1000px;
width: 20em;
height: 20em;
left: 50%;
top: 50%;
margin-left: -10em;
margin-top: -10em;
position: absolute;
} .cube
{
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(-20deg) rotateY(-20deg);
} .cube *
{
background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
-webkit-background-size: 2.5em 2.5em; background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
border: 2px solid rgba(54, 226, 248, 0.5);
-webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4); } .font
{
-webkit-transform: translateZ(10em);
} .back
{
-webkit-transform: rotateX(180deg) translateZ(10em);
} .left
{
-webkit-transform: rotateY(-90deg) translateZ(10em);
} .right
{
-webkit-transform: rotateY(90deg) translateZ(10em);
} .top
{
-webkit-transform: rotateX(90deg) translateZ(10em);
} .bottom
{
-webkit-transform: rotateX(-90deg) translateZ(10em);
}
同样：stage作为舞台，cube设置子元素的效果为3d，然后每个面都进行旋转和设置translateZ然后形成立方体。
为每个面设置backgroud设置小格格的代码：
background: -webkit-linear-gradient(
left,
rgba(54, 226, 248, 0.5) 0px,
rgba(54, 226, 248, 0.5) 3px,
rgba(0, 0, 0, 0) 0px),
-webkit-linear-gradient(
top,
rgba(54, 226, 248, 0.5) 0px,
rgba(54, 226, 248, 0.5) 3px,
rgba(0, 0, 0, 0) 0px); -webkit-background-size: 2.5em 2.5em;
背景设置，从左到右的3像素的条条，从上到下的3像素的条条；然后设置背景大小为2.5em 2.5em ，然后将背景重复显示，效果如下（我添加了边框）：
现在的完整效果：
可以看到立方体已经成型了，最后添加上动画就行了，不要觉得动画很复杂，其实很简单~
定义一个动画帧：
@-webkit-keyframes spin
{
from
{
-webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
transform: translateZ(-10em) rotateX(0) rotateY(0deg);
} to
{
-webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
}
}
名字为spin，开始时 translateZ(-10em) rotateX(0) rotateY(0deg); 结束时 ： translateZ(-10em) rotateX(360deg) rotateY(360deg); 即同时绕着x,y轴360度旋转。
最后给我们的立方体加上此animation属性：
.cube
{
-webkit-animation: 6s spin linear infinite;
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(-20deg) rotateY(-20deg);
}
设置时间为动画时间 6s , 动画 spin , 速度为匀速linear , 无限循环 infinite ；
关于更加细致的参数设置，可以参考w3cSchool~以后我也会写单独介绍CSS3的属性的博客~
好了，最终的效果就已经完成了~
对于原网站的样子，有点细微的差别：
因为它额外给每个面添加了一个径向渐变，那么我们添加上：
.cube *:before
{
display: block;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);
content: '';
height: 100%;
width: 100%;
position: absolute;
}
利用before这个伪元素，然后设置径向渐变~~现在终于一致了~
版权声明：本文为博主原创文章，未经博主允许不得转载。
HTML5 CSS3 诱人的实例： 3D立方体旋转动画的更多相关文章
- HTML5 CSS3 诱人的实例 ： 网页载入进度条的实现，下载进度条等
今天给大家带来一个比較炫的进度条,进度条在一耗时操作上给用户一个比較好的体验,不会让用户认为在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...
- HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...
- HTML5 CSS3 诱人的实例 ： 网页加载进度条的实现，下载进度条等
今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...
- HTML5 CSS3 诱人的实例 ：模仿优酷视频截图功能
一般的视频网站对于用户上传的视频,在用户上传完成后,可以对播放的视频进行截图,然后作为视频的展示图.项目中也可以引入这样的功能给用户一种不错的体验,而不是让用户额外上传一张展示图. 效果图: 看起来还 ...
- jquery和CSS3带倒影的3D万花筒旋转动画特效效果演示
<!DOCTYPE html> <html> <head> <title></title> <meta charset='utf-8' ...
- 3D立方体旋转动画
在线演示 本地下载
- 基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- css3-实现3D立方体旋转
核心内容: 1.CSS3 中 animation.perspective 属性的熟练运用. 2.CSS3 中的变形属性 transform,在 3D 立体效果中的运用. 3.3D 立方体旋转实现原理. ...
随机推荐
- FFmpeg与VS2010
编译FFmpeg是一件痛苦的事情,一般都直接使用Zeranoe FFmpeg Builds. 如果使用这个版本,需要注意ffmpeg的帮助里的一段话: To create import librari ...
- iOS 百度地图计算两个点时间的距离
最近在解项目bug,更新地位城市的时候有个错误,后来想在位置改变多少距离之后,再取更新位置,这个功能去年做过.但是又忘记了! 所以还是记录一下吧. 百度地图提供了一个方法: BMKMapPointFo ...
- Android开发技巧——高亮的用户操作指南
Android开发技巧--高亮的用户操作指南 2015-12-15补记: 发现使用PopupWindow进行遮罩层的显示,在华为P7上会有问题.具体表现为:画出来的高亮部分会偏下.原因为:通过view ...
- C++语言之静态变量的运用
#include <iostream> using namespace std ; class Banana { public: static int id ; Banana(void) ...
- MFC中char*,string和CString之间的转换
MFC中char*,string和CString之间的转换 一. 将CString类转换成char*(LPSTR)类型 方法一,使用强制转换.例如: CString theString( &q ...
- 关于getchar函数缓冲区的问题
最近,看到有同学问我关于getchar()这个函数缓冲区的问题,结合我以前的学习,我将对getchar()进行一次总结,当然,这些都是别人已经提过的东西,我只是总结,接下来我们来看看. 首先,用get ...
- 记录一下Maven整合spring，hibernate，strusts2我程序中出的bug
action类如下 package com.itheima.movenweb.action; import java.util.List; import org.apache.struts2.Serv ...
- 解决：MySQL 报错：1045 - Access denied for user 'root'@'localhost'(using password YES)
一.前言 今年疯狂迷上了开源,只要看到好的开源项目,就会不顾一切一股脑扎进去研究,五一期间发现一个很好的关于众筹的开源项目,但不巧,这个项目竟然是 PHP 写的,没学过 PHP,自然对这个开源项目毫无 ...
- 一个SQL存储过程面试题(比较简单)
三个月前刚毕业的时候,听到存储过程就头疼. 写一个SQL存储过程,建立一个表USER 字段是姓名,年龄,职位,权限,然后向里面插入6条数据,然后查询出年龄大于18的所有信息. 下面是答案: 复制代码 ...
- 2013-9 OWASP论坛
Broken We Application Project ------这个PPT需要下载 OWASP BWA----- A Virtual machine---收集 Broken Web App ...