HTML5——3D立方体旋转动画

效果图：

代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>基于CSS3的3D立方体旋转动画又一版本</title><style >*{box-sizing: border-box;   }html{background: radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);height: 100%;}body{width: 20em;height: 20em;left: 50%;margin-left: -10em;margin-top: -10em;perspective: 1000px;position: absolute;top: 50%;}#cube{animation: 6s spin linear infinite;height: 100%;position: absolute;transform-style: preserve-3d;width: 100%;}#cube *{background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), linear-gradient(0deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);background-size: 2.5em 2.5em, 2.5em 2.5em;background-color: rgba(0, 0, 0, 0.5);border: 2px solid rgba(54, 226, 248, 0.5);box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);display: block;height: 20em;position: absolute;width: 20em;}#cube *:before{background: radial-gradient(center, ellipse, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);content: '';height: 100%;position: absolute;width: 100%;}#back{transform: rotateX(180deg) translateZ(10em);}#front{transform: rotateY(0deg) translateZ(10em);}#bottom{transform: rotateX(-90deg) translateZ(10em);}#left{transform: rotateY(-90deg) translateZ(10em);}#right{transform: rotateY(90deg) translateZ(10em);}#top{transform: rotateX(90deg) translateZ(10em); }@keyframes spin{      0%{ transform: translateZ(-10em) rotateX(0) rotateY(0deg);}100%{transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);}}</style>
</head><body><ul id="cube"><li id="back"></li><li id="bottom"></li><li id="front"></li><li id="left"></li><li id=right"></li><li id="top"></li></ul>
</body>
</html>

HTML5——3D立方体旋转动画相关推荐

html鼠标互动旋转立方体,css3 transform及原生js实现鼠标拖动3D立方体旋转的示例介绍...
本文通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3D立方体的拖动旋转,并将旋转角度实时的反应至界面上显示. 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴 ...
3d立方体旋转相册（转载）
抖音上要到的效果第一步:新建txt文件第二步:把以下代码复制到txt文件中,并保存 <!DOCTYPE html> <html><head><meta c ...
html 衣服特效,详细介绍HTML5 3D衣服摇摆动画特效如何实现
这又是一款基于HTML5 Canvas的3D动画杰作,它是一个可以随风飘动的3D衣服摇摆动画特效,非常逼真.当我们将鼠标滑过衣服时,衣服将会出现摇摆的动画,点击鼠标时,衣服将会更加剧烈地摆动. 在线演 ...
html全屏飘雪花特效,html5 3D飘落雪花动画特效
特效描述:html5 3D飘落雪花动画.雪花动画代码结构 1. 引入JS 2. HTML代码雪花飘落场景特效 body { margin: 0; padding: 0; position: rel ...
html5中怎么让文字旋转动画效果图,HTML5中实现的CSS 3D文字旋转动画
一个基于HTML5的网页文字3D旋转动画效果,支持中文和英文字符,浏览请注意要使用支持CSS3技术的浏览器,比如Opera.Chrome等,主要结合transition 和 animation来实现, ...
图片3d立方体旋转html代码,超酷3D立方体空间旋转图片画廊特效
这是一款效果非常炫酷的CSS3 3D立方体空间旋转图片画廊特效.该特效实际是一个3D立方体,在其内部显示图片.在点击立方体每一面的图片时,这张图片就会放大到屏幕的中间,效果非常的酷. 因为IE浏览器不 ...
WPF仿3D照片墙旋转动画Demo
Demo中实现两种方式旋转3照片墙动画,分别是:计时器旋转和WPF动画旋转. ps:WPF动画旋转角度计算还需优化,Demo只是提供思路,借鉴和学习. 1.计时器旋转 XAML: <UserCo ...
HTML5特效~3D立方体旋转
先欣赏一下该特效的最终效果本文源码参考自http://www.cnblogs.com/ECJTUACM-873284962/进行一点点优化,下面是对此特效原理上的的剖析. 该特效是基于Css3的一些 ...
css实现3D立方体旋转特效
先来看运行后出来的效果它是在不停运行的一个立方体先来看html部分的代码 <div class="rect-wrap"> <!--舞台元素,设置perspec ...

HTML5——3D立方体旋转动画

HTML5——3D立方体旋转动画相关推荐

最新文章

热门文章