<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>立方体动画</title>

<style type="text/css">

body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{

margin:0;

padding:0;

}

html,body{

height: 100%;

}

body{

/*background: url(img/body_bg.png) repeat-x;*/

background-size: 100% 100%;

display: flex;

justify-content: center;

align-items: center;

}

.box{

width: 200px;

height: 200px;

/*background: blue;*/

transform-style: preserve-3d;

/*transform:rotateY(30deg) rotateX(-15deg);*/

animation:lft_ani 8s infinite linear;

}

.box a{

display: block;

opacity: .4;

border: 1px solid black;

transform-style:preserve-3d;

}

.box .small{

width: 100px;

height: 100px;

background: #18fa07;

position: absolute;

left: 50px;

top: 50px;

}

.box .big{

width: 200px;

height: 200px;

background:#2501fd;

position: absolute;

left: 0;

top: 0;

transition: all 1s;

}

.box .big:nth-of-type(1){

transform:translateZ(100px);

}

.box .big:nth-of-type(2){

transform:translateZ(-100px);

}

.box .big:nth-of-type(3){

transform:rotateY(-90deg) translateZ(100px);

}

.box .big:nth-of-type(4){

transform:rotateY(90deg) translateZ(100px);

}

.box .big:nth-of-type(5){

transform:rotateX(90deg) translateZ(100px);

}

.box .big:nth-of-type(6){

transform:rotateX(-90deg) translateZ(100px);

}

.box:hover .big:nth-of-type(1){

transform:translateZ(150px);

}

.box:hover .big:nth-of-type(2){

transform:translateZ(-150px);

}

.box:hover .big:nth-of-type(3){

transform:rotateY(-90deg) translateZ(150px);

}

.box:hover .big:nth-of-type(4){

transform:rotateY(90deg) translateZ(150px);

}

.box:hover .big:nth-of-type(5){

transform:rotateX(90deg) translateZ(150px);

}

.box:hover .big:nth-of-type(6){

transform:rotateX(-90deg) translateZ(150px);

}

.box:hover{

animation:lft_ani 8s infinite linear paused;

}

.box .small:nth-of-type(7){

transform:translateZ(50px);

}

.box .small:nth-of-type(8){

transform:translateZ(-50px);

}

.box .small:nth-of-type(9){

transform:rotateY(-90deg) translateZ(50px);

}

.box .small:nth-of-type(10){

transform:rotateY(90deg) translateZ(50px);

}

.box .small:nth-of-type(11){

transform:rotateX(90deg) translateZ(50px);

}

.box .small:nth-of-type(12){

transform:rotateX(-90deg) translateZ(50px);

}

@keyframes lft_ani{

0%{

transform:rotateX(0deg) rotateY(0deg);

}

100%{

transform:rotateX(360deg) rotateY(360deg);

}

}

</style>

</head>

<body>

<div class="box">

<a href="#" class="big"></a>

<a href="#" class="big"></a>

<a href="#" class="big"></a>

<a href="#" class="big"></a>

<a href="#" class="big"></a>

<a href="#" class="big"></a>

<a href="#" class="small"></a>

<a href="#" class="small"></a>

<a href="#" class="small"></a>

<a href="#" class="small"></a>

<a href="#" class="small"></a>

<a href="#" class="small"></a>

</div>

</body>

</html>

（六）HTML5立方体动画设置的更多相关文章

  1. HTML5 3D动画效果

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  2. 7款超酷HTML5 3D动画精选应用及源码

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  3. 超给力的HTML5 3D动画欣赏及源码下载

    HTML5有着非常巨大的魅力,尤其是CSS3和Cavnas,可以帮助页面渲染得非常炫酷.值得一提的是,利用HTML5的3D特性可以帮助你更加方便地在网页上实现3D动画特效.本文分享的这些HTML5 3 ...

  4. 基于HTML5/CSS3可折叠的3D立方体动画

    今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真. 在线预览   源码下载 实现的代码 ...

  5. 【转】15个无比华丽的HTML5/CSS3动画应用

    原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...

  6. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  7. 8款效果惊艳的HTML5 3D动画

    1.HTML5 WebGL水面水波荡漾特效 之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错.今天再向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大 ...

  8. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  9. 14款超时尚的HTML5时钟动画

    时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟.3D时钟.个性化时钟等 ...

随机推荐

  1. HackerRank - string-reduction【反推】【规律】

    HackerRank - string-reduction[反推] 题意 给出一串 只有 字母 a, b, c 组成的字符串,然后没两个不同的字符碰到一起都可以变成另外一个字符,然后变到最后,求最短的 ...

  2. Lambda加自定义比较器实现两个列表的合并

    一次项目有这样的需求,本地存储了json数据,可以转化为对应的List列表,现在需要更新,从服务器那里获取最新的数据更改.总的来说就是本地有个List表,如果数据需要更新,则会向服务器发送请求来获取需 ...

  3. tmux命令

    tmux 新建一个会话,进入tmux tmux new -s 'main' 新建一个会话'main',进入tmux' tmux a -t 'main' 进入tmux会话'main' exit 退出当前 ...

  4. 通过FFmpeg将多媒体文件解码后保存成Bmp图像（YUV420 RGB32）

    /* g++ -o test test.cpp -lavformat -lavcodec -lavutil -lz -lm -lpthread -lswscale */ #include <st ...

  5. uvm学习杂记

    一个类,只定义了而没有实例化,是没有任何意义的,但也有特殊情况,对于一个静态类,即其成员变量都是静态的,不实例化也可以正常使用: 类要想和DUT通信,不能在类里定义接口,会报错,只能在类里定义虚拟接口 ...

  6. springmvc 整合微信

    springmvc 整合微信 方式一: ① 配置验证 @RequestMapping(value = "/into", method = RequestMethod.GET, pr ...

  7. 20145120黄玄曦《网络对抗》MSF基础应用

    20145120黄玄曦<网络对抗>MSF基础应用 准备工作 本来决定就是老师提供的XP虚拟机了,做着做着发现因为打补丁以及语言的问题,需要另外的虚拟机. 求来了不那么健壮的虚拟机,环境如下 ...

  8. 20145219 《Java程序设计》第04周学习总结

    20145219 <Java程序设计>第04周学习总结 教材学习内容总结 继承 继承就是避免多个类间重复定义共同行为. 面向对象中,子类继承父类,就是把程序中相同的代码部分提升为父类. R ...

  9. Cisco、HUAWEI、H3c、Firewall等设备配置snmp

    配置HUAWEI交换机S1720.S2700.S5700.S6720等型号设备的snmp v3配置 注:此配置来源自官方配置文档 操作步骤 配置交换机的接口IP地址,使其和网管站之间路由可达 (图1) ...

  10. Spring_事务-注解代码

    applicationContext.xml <?xml version="1.0" encoding="UTF-8"?><beans xml ...