css3立体旋转动画
效果图
在别人网站上看到一个立体旋转的例子,然后突然想到自己前几天学习的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立体旋转动画的更多相关文章
- Android立体旋转动画实现与封装(支持以X、Y、Z三个轴为轴心旋转)
本文主要介绍Android立体旋转动画,或者3D旋转,下图是我自己实现的一个界面 立体旋转分为以下三种: 1. 以X轴为轴心旋转 2. 以Y轴为轴心旋转 3. 以Z轴为轴心旋转--这种等价于andro ...
- css3立体旋转菜单
css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/71 ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- [css3]圆盘旋转动画
效果:打开只能看到logo,鼠标放上去,圆盘渐显放大旋转展示出来 知识点: [html+css] 1.logo水平垂直居中于圆盘内,用到的样式 position: absolute; left: 0; ...
- css3 3d旋转动画
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Css3 3D 旋转动画效果
需求: 1.一个列表滑动效果为360 旋转 准备: 1.css 基础 2.Css 动画基础animation 3.transform-style概念 4 transform 概念 5 JavaScri ...
- css3立体旋转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3 3D旋转动画代码实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS3 3D旋转动画菜单
在线演示 本地下载
随机推荐
- linux中who命令显示的tty、pts和(:0)(:0.0)是什么意思
http://blog.csdn.net/cwj_beyond/article/details/6987345 http://unix.stackexchange.com/questions/7217 ...
- Linux内核驱动之GPIO子系统(一)GPIO的使用
转自:http://blog.csdn.net/mirkerson/article/details/8464290 一 概述 Linux内核中gpio是最简单,最常用的资源(和 interrupt , ...
- 图结构练习——最小生成树(kruskal算法(克鲁斯卡尔))
图结构练习——最小生成树 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 有n个城市,其中有些城市之间可以修建公路,修建不同的公 ...
- python列表分组的技巧
今天项目上需要到的. 如,将并行部署的机器分批次. 一次十台机器,如果分3次并行部署,则第一次123,第二次456,第三次789,第四次10. #coding=utf-8 a=[1,2,3,4,5,6 ...
- hdu 1698:Just a Hook(线段树,区间更新)
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- css2
CSS 实现div宽度根据内容自适应 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- STUN和TURN技术浅析
转自:http://blog.csdn.net/yu_xiang/article/details/9227023 在现实Internet网络环境中,大多数计算机主机都位于防火墙或NAT之后,只有少部分 ...
- 智能车学习(二十)——浅谈C车硬连接与软连接
一.为何要追求软连接? 车子进行软连接之后,可以达到一种效果,就是在高速过程中,车子如果快要发生侧翻的时候,只会跳一个后轮,且只是轻微,而前轮如果进行的内倾,就可以让前轮最大面积接触,增大 ...
- Linux学习笔记(19) Linux服务管理
1. 服务的分类 Linux服务可分为RPM包默认安装的服务和源码包安装的服务.前者可细分为独立的服务(直接作用于内存中)和基于xinetd服务.xinetd本身是独立的服务,其唯一的功能是管理其他服 ...
- JAVA Day4
循 环 所有循环的流程 声明循环变量-->判断循环条件-->执行循环操作-->更新循环变量 不断执2 ...