CSS3旋转跳跃的立方体

实现3d效果旋转跳跃的立方体，CSS3中具有的perspective就是为了设置井深，创建一个3D的环境，而transform-style就是为了创建3d环境。

井深：指视觉与平面的距离，使具有三维位置变换的元素产生透视效果，就是我们理解的【Z轴】。从视觉上观察，值越大看起来距自己越近，元素整体越大；值越小，越远，元素整体越小。在设计中给需要3D的盒子的父级设置井深，让其具有立体透视效果，通常perspective使用的值800px或者1200px ，这两个值从视觉上看比较舒服，也可以根据需求自行设置。

首先，需要创建一个大盒子div将立方体包裹起来，以便在css样式中固定六个面的位置：

               <div class="wrap"><div class="cube"><div class="front">前</div><div class="back">后</div><div class="left">左</div><div class="right">右</div><div class="top">上</div><div class="bottom">下</div></div></div>

在CSS中添加相关的样式如下：

* {padding: 0px;margin: 0px;
}
.wrap{margin-top: 200px;margin-left: 500px;/*设置井深、透视*/perspective: 800px;/*视觉来源,透视效果*/perspective-origin: 50% 100px;
}
.cube{position: relative;width: 200px;/*创建3d环境*/transform-style: preserve-3d;
}
.cube div{position: absolute;width: 200px;height: 200px;/*添加内阴影*/box-shadow: 5px 5px 50px plum inset;border: 1px gainsboro solid;
}/*旋转设置立方体的六个面*/
.front {transform: translateZ(100px);
}
.back {transform: translateZ(-100px) rotateY(180deg);
}
.right {transform: rotateY(-270deg) translateX(100px);/*改变元素位置*/transform-origin: top right;
}
.left {transform: rotateY(270deg) translateX(-100px);transform-origin: center left;
}
.top {transform: rotateX(-90deg) translateY(-100px);transform-origin: top center;
}
.bottom {transform: rotateX(90deg) translateY(100px);transform-origin: bottom center;
}

演示静态效果：

在CSS样式中添加动态效果：

    /*帧动画,旋转角度*/
@keyframes spin {from { transform:rotateX(0) rotateY(0) rotateZ(0) ; }to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}/*旋转速度*/
.cube {animation: spin 10s infinite linear;
}

元气少女，加油！

CSS3旋转跳跃的立方体相关推荐

网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
java3D实现空间立方体,纯CSS3实现一个旋转的3D立方体盒子
简单介绍上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果注:代码在chrome 43.0.2357 ...
解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果一.前言最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
html5把六张图片做成立方体,html5 3D旋转的图片立方体代码
特效描述:html53D 旋转的图片立方体.html5 css3转换属性创建3D旋转立方体多维数据图片库代码. 代码结构 1. HTML代码单击下面的图片来旋转立方体. //DOM load eve ...
CSS3旋转实例学习
CSS3旋转实例学习(附3D旋转实例) 我们都有在网页上见过一些交互性的效果,比如用鼠标滑向图标或是按钮的时候,图标会自动旋转一周,这就是CSS3旋转效果.在CSS3中有个常见的transform应用 ...
使用CSS3旋转DIV
使用CSS3旋转DIV 参加某公司的前端工程师笔试,遇到以下问题. 请完成以下填空,使得id为loading的div每1秒转1圈并无限循环. <html> <head&g ...
沿着x轴旋转的html例子,CSS3旋转实例学习（附3D旋转实例）
我们都有在网页上见过一些交互性的效果,比如用鼠标滑向图标或是按钮的时候,图标会自动旋转一周,这就是CSS3旋转效果.在CSS3中有个常见的transform应用,transform主要包括以下几种:旋 ...
可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
css3缓慢出现,让CSS3旋转开始缓慢然后结束缓慢？
这不是一个可以通过使用ease-in解决的问题.让CSS3旋转开始缓慢然后结束缓慢? 如果我有一个元素,我想在CSS3中旋转一段时间,但是开始慢,结束速度慢,我该怎么做? CSS @-webkit-k ...
炫酷的动画特效—css3旋转立方球体
炫酷的动画特效-css3旋转立方球体想要实现旋转立方球体特效,以下的内容你不容错过. 要理解的知识点形成一个3D空间: transform-style:preserve-3d (让父元素形成3D, ...

CSS3旋转跳跃的立方体

在CSS中添加相关的样式如下：

CSS3旋转跳跃的立方体相关推荐

最新文章

热门文章