3D动画——正方体的旋转与张开

大家好，看到网上花花绿绿的网页旋转跳跃，自己也心动做了一个，长话短说，我们就来看一下吧。

先贴上代码和效果图。

HTML代码：

<ul><li></li><li></li><li></li><li></li><li></li><li></li><div></div><div></div><div></div><div></div><div></div><div></div></ul>

CSS代码：

 /* 给两个正方体设置旋转动画 */@keyframes my3d {0% {transform: rotateX(0) rotateY(0) rotateZ(0)}100% {transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)}}ul {width: 200px;height: 200px;position: relative;perspective-origin: 50% 50%;transform-style: preserve-3d;margin: 200px auto;list-style: none;animation-name: my3d;animation-play-state: running;animation-duration: 10s;animation-iteration-count: infinite;}ul li {width: 200px;height: 200px;position: absolute;left: 0;top: 0;opacity: 0.7;}ul div {width: 100px;height: 100px;position: absolute;left: 50px;top: 50px;}/* 给里面的小正方体设置旋转 */ul div:nth-last-child(6) {transform: rotateX(0deg) translateZ(50px);background-image: url("../images/1.png");}ul div:nth-last-child(5) {transform: rotateX(90deg) translateZ(-50px);background-image: url("../images/2.png");}ul div:nth-last-child(4) {transform: rotateX(0deg) translateZ(-50px);background-image: url("../images/3.png");}ul div:nth-last-child(3) {transform: rotateX(-90deg) translateZ(-50px);background-image: url("../images/4.png");}ul div:nth-last-child(2) {transform: rotateY(90deg) translateZ(-50px);background-image: url("../images/5.png");}ul div:nth-last-child(1) {transform: rotateY(90deg) translateZ(50px);background-image: url("../images/6.png");}/* 给外面的大正方体设置旋转 */ul li:first-child {transform: rotateX(0deg) translateZ(100px);background-image: url("../images/1.png");}ul li:nth-child(2) {transform: rotateX(90deg) translateZ(-100px);background-image: url("../images/2.png");}ul li:nth-child(3) {transform: rotateX(0deg) translateZ(-100px);background-image: url("../images/3.png");}ul li:nth-child(4) {transform: rotateX(-90deg) translateZ(-100px);background-image: url("../images/4.png");}ul li:nth-child(5) {transform: rotateY(90deg) translateZ(-100px);background-image: url("../images/5.png");}ul li:nth-child(6) {transform: rotateY(90deg) translateZ(100px);background-image: url("../images/6.png");}/* 设置伪类hover鼠标碰触 */ul:hover li:first-child {transition: 2s linear;transform: translateZ(200px);}ul:hover li:nth-child(3) {transition: 2s linear;transform: translateZ(-200px);}ul:hover li:nth-child(2) {transition: 2s linear;transform: rotateX(90deg) translateZ(-200px);}ul:hover li:nth-child(4) {transition: 2s linear;transform: rotateX(-90deg) translateZ(-200px);}ul:hover li:nth-child(5) {transition: 2s linear;transform: rotateY(90deg) translateZ(-200px);}ul:hover li:nth-child(6) {transition: 2s linear;transform: rotateY(90deg) translateZ(200px);}ul:hover div:nth-last-child(6) {transition: 3s linear;transform: translateZ(100px);}ul:hover div:nth-last-child(4) {transition: 3s linear;transform: translateZ(-100px);}ul:hover div:nth-last-child(5) {transition: 3s linear;transform: rotateX(90deg) translateZ(-100px);}ul:hover div:nth-last-child(3) {transition: 3s linear;transform: rotateX(-90deg) translateZ(-100px);}ul:hover div:nth-last-child(2) {transition: 3s linear;transform: rotateY(90deg) translateZ(-100px);}ul:hover div:last-child {transition: 3s linear;transform: rotateY(90deg) translateZ(100px);}

这两个分别是没有鼠标移入和鼠标移入时，一个嵌套在另一个的效果：

由于这两个正方体是不停的在旋转，所以观看的乐趣就在自己用代码实现后自己去细细品尝了。这个图形只用到了h5和除css3的知识，如有不理解，可以留下问题。可能代码写的有点累赘，希望不要嫌弃，嘻嘻。

3D动画——正方体的旋转与张开相关推荐

CSS学习记录9/3D的正方体的两种编写方式/3D长方体的编写方式/3D动画/3D播放器
什么是2D什么是3D? 2D就是一个平面,只是宽度和高度,没有厚度. 3D就是一个立体,有宽度有高度,还有厚度. 默认情况下所有的元素都是呈2D展现的. 如何让某个元素呈3D展现? 和透视一样,只需给 ...
android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...
[css] css 3d 动画,跟随鼠标移动做球形旋转
点击在线查看动画效果代码如下 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
视觉盛宴 HTML5 3D动画应用赏析
以下是一些很棒的HTML5 3D动画应用,值得一看. 1.3D HTML5 Logo动画 HTML5多视角3D旋转动画 HTML5 3D动画实现起来非常方便,之前介绍过基于jQuery的3D旋转插件是 ...
用python制作3d动画_-用 Python 做科学计算--Visual-制作3D演示动画
# Visual-制作3D演示动画 [Visual](http://vpython.org) 是Python的一个简单易用的3D图形库,使用它可以快速创建3D场景.动画.和TVTK相比它更加适合于创建 ...
纯CSS实现beautiful的3D动画
大家好,我是"前端点线面",一位新生代农民工,欢迎关注我获取最新前端知识和大量思维导图("百题斩"获取<前端百题斩>pdf版:分别回复"g ...
android开发骰子动画,GitHub - jieyou/dice: 一个css3 3d动画效果的色子（或称骰子？）...
dice -- 3d色子(或称骰子?) 一个css3 3d动画效果的色子完全效果(完全流畅的3d动画.阴影.圆角):Chrome\Firefox\Safari\iOS Safari 6.0+\And ...
CSS3动画之3D动画
所有东西一跟3D扯上关系,复杂指数都是噌噌噌往上走.不过也正常,毕竟多了一个维度,要有三维应有的尊严. 3D Transforms要怎么写?能写翻牌效果吗?能写翻书效果吗?能写出立体书的效果吗?点进来 ...
《视觉开发专题》之 OpenGL 3D动画绘制图形学概念的理解
知识前导计算机图形学的终极目标--讨好人类视觉系统最近在啃的书中有一本叫<计算机图形学原理及实践>,这本书让我深有感触的是其绪论中对计算机构建真实感图像的理解:我们所致力的最终目 ...

3D动画——正方体的旋转与张开

3D动画——正方体的旋转与张开相关推荐

最新文章

热门文章