炫酷的动画特效—css3旋转立方球体

想要实现旋转立方球体特效，以下的内容你不容错过。
要理解的知识点

形成一个3D空间： transform-style:preserve-3d （让父元素形成3D，让其子元素在3D空间进行变化）
动画 animation
特点：不需要事件进行触发，调用关键帧即可
常用的写法：animation:关键帧的名称动画运动的时间 linear(匀速) 动画延迟的时间；
3D的旋转
transform:rotate();
rotateX()
rotateY()
rotateZ()
rotate3D()
rotate3D(x,y,z,a) [ 0不旋转，1旋转 ]
- x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
- y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
- z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
- a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
制定关键帧：
@keyframes 关键帧的名称{
0%{
//开始状态
}
25%{
```
     }50%{}...100%{//结束状态}}
```

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}ul,li{list-style:none;}body{background:#000;}.box{width:400px;height:400px;/* 固定定位，让球体在浏览器窗口左右上下居中 */position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;/* 形成3D场景 */transform-style: preserve-3d;/* 倾斜一个角度，例如绕x轴旋转50度，绕y轴旋转25度 */transform:rotateX(50deg) rotateY(25deg);/* 调用关键帧，使球体按照每10s一圈匀速不停转动*/animation:ulRotate  10s linear infinite;}.box li{width:398px;height:398px;border:1px solid blue;/* 形成一个正圆 */border-radius: 100%;/* 将圆以定位的形式叠加在一起 */position:absolute;}/*本来所有的圆叠加在一起，我们设置rotateX分别取值20,40,60...180,所有的圆会变成绕x轴的球体  */.rotateX1{transform:rotateX(20deg);}.rotateX2{transform:rotateX(40deg);}.rotateX3{transform:rotateX(60deg);}.rotateX4{transform:rotateX(80deg);}.rotateX5{transform:rotateX(100deg);}.rotateX6{transform:rotateX(120deg);}.rotateX7{transform:rotateX(140deg);}.rotateX8{transform:rotateX(160deg);}.rotateX9{transform:rotateX(180deg);}/* 类似的，增加绕y轴的球体 */.rotateY1{ transform:rotateY(20deg);}.rotateY2{transform:rotateY(40deg);}.rotateY3{transform:rotateY(60deg);}.rotateY4{transform:rotateY(80deg);}.rotateY5{transform:rotateY(100deg);}.rotateY6{transform:rotateY(120deg);}.rotateY7{transform:rotateY(140deg);}.rotateY8{transform:rotateY(160deg);}.rotateY9{transform:rotateY(180deg);} /* 制定关键帧 */@keyframes ulRotate{/* 开始状态 */0%{transform:rotateX(50deg) rotateY(25deg) rotateZ(0deg);}/* 结束状态 */100%{transform:rotateX(50deg) rotateY(25deg) rotateZ(360deg);}}</style>
</head>
<body><ul class="box"><li class="rotateX1"></li><li class="rotateX2"></li><li class="rotateX3"></li><li class="rotateX4"></li><li class="rotateX5"></li><li class="rotateX6"></li><li class="rotateX7"></li><li class="rotateX8"></li><li class="rotateX9"></li><li class="rotateY1"></li><li class="rotateY2"></li><li class="rotateY3"></li><li class="rotateY4"></li><li class="rotateY5"></li><li class="rotateY6"></li><li class="rotateY7"></li><li class="rotateY8"></li><li class="rotateY9"></li></ul>
</body>
</html>

效果图：

炫酷的动画特效—css3旋转立方球体相关推荐

炫酷html动画,纯CSS3一个炫酷动画
纯CSS3一个炫酷动画通过下边的代码可以看到这个例子的html代码还是很简单的,中间类似图标的部分是通过给两个围绕盒子爬的虫子通过给 HTML代码 CSS代码 body{ margin: 0; b ...
html浮动炫酷样式,jQuery和CSS3炫酷表单浮动标签特效
这是一款炫酷的jQuery和CSS3表单浮动标签特效.浮动标签是指输入框中的文字或占位文本在输入框聚焦的时候,以动画的方式浮动到指定的地方.浮动标签特效是一种新颖时尚的动画特效,不仅效果很酷,而且能以 ...
css3的动画特效--元素旋转（transition，animation）
css3的动画特效--元素旋转(transition,animation) 开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和tra ...
一款炫酷Loading动画--加载失败
简介上一篇文章一款炫酷Loading动画–加载成功,给大家介绍了成功动画的绘制过程,这篇文章将接着介绍加载失败特效的制作. 相比成功动画,有了前面的经验,失败动画的过程就显得比较简单了. 动画结构分 ...
html中flash的简单动画效果,css实现快速炫酷抖动动画效果
1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...
html5星空效果图,HTML5 canvas炫酷星空背景特效
jquery-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件.这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动. 使用方法 ...
android svg动画框架,Android实现炫酷SVG动画效果
svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们可以直接用代码来描绘图像,可以用任何文字处理工具打开svg图像,通过改变部分代码来使图像具有交互 ...
如何做一个炫酷的动画网站-css实现图片上下浮动效果
目前网站制作技术已经非常成熟.所以要实现一个炫酷的动画网站还是非常容易,现在通过js和css就都能实现.直接css就能实现各种效果,下面我们来通过一个小动画看看如何用css来实现让你的网站图片上下浮动 ...
制作炫酷AR卡片特效——小技巧
制作炫酷AR卡片特效--小技巧本帖最后由仅为年时于 2016-7-9 08:28 编辑 gif展示.gif (2.82 MB, 下载次数: 11) 下载附件保存到相册 2016-7-9 01 ...

炫酷的动画特效—css3旋转立方球体

炫酷的动画特效—css3旋转立方球体

炫酷的动画特效—css3旋转立方球体相关推荐

最新文章

热门文章