demo地址

效果图

在别人网站上看到一个立体旋转的例子,然后突然想到自己前几天学习的css3旋转,就试着做了一个例子,看起来有一些粗糙。

html结构很简单:

<div>
<ul class="ani">
<li class="r1"></li>
<li class="r2"></li>
<li class="r3"></li>
<li class="r4"></li>
<li class="r5"></li>
<li class="r6"></li>
</ul>
</div>

核心是一个ul,li列表,其中6个li通过不同的属性设置分别构成立方体的6个面,然后外围ul沿Y轴旋转,当然你也可以任意设置。

关于transform更多讲解,请看transform应用详解   另外还可参考案例css3+js打造炫酷图片展示

注意,在做立体效果时一定注意在父元素添加transform-style: preserve-3d;属性,字面理解 变换形式,3d透视与平面,当设置为flat时,表示在flat平面变换。

下面主要是css属性设置,

 *{margin:0px;padding:0px}
body{background-color:#}
div{-webkit-perspective:;-webkit-transform-style: preserve-3d;position:absolute;top:%;left:%;}
ul{position:absolute;left:0px;top:0px;-webkit-transform:translate(-%,-%);width:200px;height:200px; -webkit-transform-style: preserve-3d }
li{list-style-type:none;position:absolute;top:0px;left:0px;right:0px;bottom:0px;width:200px;height:200px;font-size:100px;text-align:center;line-height:200px;opacity:0.3;-webkit-transition: -webkit-transform 2s, opacity 2s;border:2px solid #C09;box-shadow:1px 1px 10px #C09; -webkit-backface-visibility: visible;color:#fff}
.ani{ -webkit-animation: rotaY 5s infinite linear;}
@-webkit-keyframes rotaY{
from{-webkit-transform:rotateY(0deg) }
to{-webkit-transform:rotateY(-360deg) }
}
@-webkit-keyframes rotaX{
from{-webkit-transform:rotateX(0deg)}
to{-webkit-transform:rotateX(-360deg)}
}
@-webkit-keyframes rotaZ{
from{-webkit-transform:rotateZ(0deg)}
to{-webkit-transform:rotateZ(-360deg)}
} .r1{-webkit-transform:translateZ(100px)}
.r2{-webkit-transform:rotateY(90deg) translateZ(100px) }
.r3{-webkit-transform: rotateY(180deg) translateZ(100px)}
.r4{-webkit-transform: rotateY(-90deg)translateZ(100px) }
.r5{-webkit-transform: rotateX(90deg) translateZ(100px) }
.r6{-webkit-transform:rotateX(-90deg) translateZ(100px) }

有一点就是设置元素的水平垂直居中,absolute,top,left,translate即可方便搞定。

在构建正方体时,我们首先设置各个li元素为绝对定位,在这一步,这6个li元素是相互重合的,第二步设置translateZ与rotateY与rotateX,

可以想象一下,现在旋转中心在整个div的中心,当沿Y轴旋转90度时,这个页面是完全垂直于视平面的,这时候再加translateZ,这样就形成了我们的第一个面,距离中心100px,

其他面都是同样的道理,对于上下两个面则需要采用沿X轴旋转,但是他们距中心的距离是相同的即translateZ,这样分别设置每个元素的旋转方向和变换之后便形成了一个立方体。

如有问题及错误或者更好的解决办法,请联系我。

另自己新建立了一个qq群:85530789,欢迎志同道合的朋友一起多多交流技术。(现在好多技术群基本都聊不了多少真正的技术话题,失望了)

css3立体旋转动画的更多相关文章

  1. Android立体旋转动画实现与封装(支持以X、Y、Z三个轴为轴心旋转)

    本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...

  2. css3立体旋转菜单

    css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/71 ...

  3. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  4. [css3]圆盘旋转动画

    效果:打开只能看到logo,鼠标放上去,圆盘渐显放大旋转展示出来 知识点: [html+css] 1.logo水平垂直居中于圆盘内,用到的样式 position: absolute; left: 0; ...

  5. css3 3d旋转动画

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Css3 3D 旋转动画效果

    需求: 1.一个列表滑动效果为360 旋转 准备: 1.css 基础 2.Css 动画基础animation 3.transform-style概念 4 transform 概念 5 JavaScri ...

  7. css3立体旋转

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. CSS3 3D旋转动画代码实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. CSS3 3D旋转动画菜单

    在线演示 本地下载

随机推荐

  1. linux中who命令显示的tty、pts和(:0)(:0.0)是什么意思

    http://blog.csdn.net/cwj_beyond/article/details/6987345 http://unix.stackexchange.com/questions/7217 ...

  2. Linux内核驱动之GPIO子系统(一)GPIO的使用

    转自:http://blog.csdn.net/mirkerson/article/details/8464290 一 概述 Linux内核中gpio是最简单,最常用的资源(和 interrupt , ...

  3. 图结构练习——最小生成树(kruskal算法(克鲁斯卡尔))

    图结构练习——最小生成树 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述  有n个城市,其中有些城市之间可以修建公路,修建不同的公 ...

  4. python列表分组的技巧

    今天项目上需要到的. 如,将并行部署的机器分批次. 一次十台机器,如果分3次并行部署,则第一次123,第二次456,第三次789,第四次10. #coding=utf-8 a=[1,2,3,4,5,6 ...

  5. hdu 1698:Just a Hook(线段树,区间更新)

    Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  6. css2

    CSS 实现div宽度根据内容自适应 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  7. STUN和TURN技术浅析

    转自:http://blog.csdn.net/yu_xiang/article/details/9227023 在现实Internet网络环境中,大多数计算机主机都位于防火墙或NAT之后,只有少部分 ...

  8. 智能车学习(二十)——浅谈C车硬连接与软连接

    一.为何要追求软连接?       车子进行软连接之后,可以达到一种效果,就是在高速过程中,车子如果快要发生侧翻的时候,只会跳一个后轮,且只是轻微,而前轮如果进行的内倾,就可以让前轮最大面积接触,增大 ...

  9. Linux学习笔记(19) Linux服务管理

    1. 服务的分类 Linux服务可分为RPM包默认安装的服务和源码包安装的服务.前者可细分为独立的服务(直接作用于内存中)和基于xinetd服务.xinetd本身是独立的服务,其唯一的功能是管理其他服 ...

  10. JAVA Day4

                                        循  环   所有循环的流程   声明循环变量-->判断循环条件-->执行循环操作-->更新循环变量 不断执2 ...