如何用div实现炫酷3D球体？

话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3D球体</title><style>html{background: black;}.box{width: 200px;height: 200px;margin: 300px auto;position: relative;transform-style: preserve-3d;animation: xuanzhuan 5s infinite linear;}@keyframes xuanzhuan {0%{transform: rotateX(0) rotateY(0) ;}100%{transform: rotateX(180deg) rotateY(180deg) ;}}.box>div{width: 100%;height: 100%;border: 2px solid #00b3ff;border-radius: 50%;box-shadow: 0 0 10px blueviolet;position: absolute;top: 0;left: 0;}</style>
</head>
<body>
<div class="box"></div>
<script>var box = document.querySelector(".box");var boxChild = box.children;for (let i=0;i<15;i++){box.innerHTML += "<div></div>" ;boxChild[i].style.transform = "rotateY("+ 24*i +"deg)";}
</script>
</body>
</html>

效果图：

如何用div实现炫酷3D球体？相关推荐

球体动画Android,使用CSS创建一个炫酷的球体动画效果
我最近看到了一个纯CSS实现的球体动画效果: 经过研究上面的效果实现起来大致可以分为五个步骤,下面就来一一介绍. 1.使用Jade和SCSS生成一个圆圈创建一个圆圈的第一步是生成所有组成圆圈的粒子. ...
前端实现炫酷动效_web前端入门到实战：使用CSS创建一个炫酷的球体动画效果
一个纯CSS实现的球体动画效果: 经过研究上面的效果实现起来大致可以分为五个步骤,下面就来一一介绍. 1.使用Jade和SCSS生成一个圆圈创建一个圆圈的第一步是生成所有组成圆圈的粒子.有了Jade ...
js和CSS3炫酷3D相册展示
<!doctype html> <html> <head> <meta charset="UTF"> <title>js ...
纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
html5可折叠面板,纯CSS3炫酷3D折叠面板动画特效
这是一款纯 CSS3 制作的炫酷3D折叠面板动画特效.这个效果使用3D CSS animations 来制作折叠面板的动画,纯CSS,没有使用javascript. HTML结构折叠面板的html结 ...
php星空背景动态,纯CSS3炫酷3D星空动画特效
简要教程这是一款使用纯CSS3制作的炫酷3D星空动画特效.该特效中,以飞船向前快速移动为视角,所有的星星都快速的变大并向后移动,效果非常逼真. 使用方法 HTML结构该3D星空特效只使用一个元素 ...
Canvas炫酷3D线条动画背景
下载地址 Canvas炫酷3D线条动画背景,可以变色的颜色渐变网页动态背景特效. dd:
Ubuntu 使用Compiz配置炫酷3D桌面
原文地址为: Ubuntu 使用Compiz配置炫酷3D桌面先看一下效果要实现这种3D 的效果其实很简单. Step 1:安装N卡驱动工具 sudo apt-get install nvidia- ...
canvas炫酷3d网页背景动画js特效
下载地址canvas画布实现的炫酷3d网页背景动画特效 dd:

如何用div实现炫酷3D球体？

如何用div实现炫酷3D球体？相关推荐

最新文章

热门文章