<!DOCTYPE html>
<html>
<head>
<title>球体</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-image: linear-gradient(90deg,red ,#ccc 30%,#fff 100%)
}
.bk{
margin: 200px auto;
height: 500px;width: 500px;
/*border:1px solid black;*/
position: relative;
transform-style:preserve-3d;
transform:rotate(-20deg) rotateX(-20deg) rotateY(0);
animation: ball 100s infinite linear;
}
.bk div{
position: absolute;
height: 100%;width: 100%;
border-radius: 100%;
}
.x{
border:1px solid black;
}
.y{
border:1px solid blue;
}
.x:nth-child(1){
transform: rotateY(18deg);
}
.x:nth-child(2){
transform: rotateY(36deg);
}
.x:nth-child(3){
transform: rotateY(54deg);
}
.x:nth-child(4){
transform: rotateY(72deg);
}
.x:nth-child(5){
transform: rotateY(90deg);
}
.x:nth-child(6){
transform: rotateY(108deg);
}
.x:nth-child(7){
transform: rotateY(126deg);
}
.x:nth-child(8){
transform: rotateY(144deg);
}
.x:nth-child(9){
transform: rotateY(162deg);
}
.x:nth-child(10){
transform: rotateY(180deg);
}

.y:nth-child(11){
transform: rotateX(90deg) translateZ(0px) scale(1);
}
.y:nth-child(12){
transform: rotateX(90deg) translateZ(50px) scale(0.98);
}
.y:nth-child(13){
transform: rotateX(90deg) translateZ(100px) scale(0.92);
}
.y:nth-child(14){
transform: rotateX(90deg) translateZ(150px) scale(0.80);
}
.y:nth-child(15){
transform: rotateX(90deg) translateZ(-150px) scale(0.80);
}
.y:nth-child(16){
transform: rotateX(90deg) translateZ(-100px) scale(0.92);
}
.y:nth-child(17){
transform: rotateX(90deg) translateZ(-50px) scale(0.98);
}
@keyframes ball {
0% {transform:rotate(-20deg) rotateX(-20deg) rotateY(0)}
100% {transform:rotate(-20deg) rotateX(-20deg) rotateY(360deg)}
}
</style>
</head>
<body>
<fieldset></fieldset>
<div class="bk">
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>

<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
<div class="y"></div>
</div>
</body>
</html>

CSS之立体球体的更多相关文章

  1. CSS3学习-用CSS制作立体导航栏

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 【CSS】纯css实现立体摆放图片效果

    1.  元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...

  3. CSS学习笔记二：css 画立体图形

    继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...

  4. 你想不到的！CSS 实现的各种球体效果【附在线演示】

    CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...

  5. CSS 实现的各种球体效果

    CSS 实现的各种球体效果[附在线演示] CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有 ...

  6. 使用css3和伪元素制作的一个立体导航条

    使用css3和伪元素制作的一个立体导航条供大家参考,代码如下: <!doctype html> <html lang="en"> <head> ...

  7. CSS3特效----制作立体导航栏菜单

    使用CSS3实现下图的导航菜单效果 <!doctype html> <html lang="en"> <head> <meta chars ...

  8. 你所不知道的 CSS 阴影技巧与细节

    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...

  9. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

随机推荐

  1. font-weight -- 定义字体的粗细

    font-weight -- 定义字体的粗细 取值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 70 ...

  2. Exit code from container executor initialization is : 24 ExitCodeException exitCode=24: Configuration file ../etc/hadoop/container-executor.cfg not found.

    /etc/hadoop/conf的软链接(/etc/hdfs/conf)不正确,应该是/etc/yarn/conf

  3. 反射(Reflection)

    反射主要用于在程序运行期间动态解析相关类的类名,命名空间,属性,方法并进行相应操作,以下通过两个简单的例子进行了说明: 示例1:调用程序集内部方法,运行时动态获取相关类的信息,包括类名,命名空间等信息 ...

  4. java, mybatis, 调用mysql存储过程

    Map<String, Object> bindinfo = new HashMap<String, Object>();            bindinfo.put(&q ...

  5. angularjs自定义过滤器

    实现一个按输入框中的数据筛选的功能,筛选可按电影的名称.年份.评分检索框: <input type="text" placeholder="可检索名字评分和年份&q ...

  6. Binary Tree Zigzag Level Order Traversal [LeetCode]

    Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...

  7. vs2015打包winform程序遇到的一系列问题

    1.因为打包的时候用的是release版本的东西,所以就先把项目按release编译一下,然后一大波bug,后来修改了生成目标平台为x86,我的解决方案里面加上安装部署项目共5个(ui配置:活动rel ...

  8. Wind7外接显示器选择拓展模式后，鼠标只能往右移动才能切换到外接显示器上，不能修改切换方向

    win7外接显示器选择拓展模式后,为什么鼠标只能往右移动才能切换到外接显示器上,不能修改切换方向 打开控制面板-->显示 其他不变的情况下,鼠标拖动上面的两个显示器图标,拉出你希望的方向即可.

  9. 2016年最佳Linux发行版排行榜

    2015年,不管在企业市场还是个人消费市场都是 Linux 非常重要的一年. 最好的回归发行版:openSUSE openSUSE 背后的 SUSE 公司是最老的 Linux 企业,它成立于 Linu ...

  10. b/s 读取多个FTP文件（图片，视频）压缩到服务器 下载到客户端

    其实需求是这样, 要做一键导出, 有图片,有照片,youhtml,存在不同的文件夹,每次下载都必须下载最新数据,因为FTP是随时更新的. 1.这要是一直下载下载,浏览器一直跳窗口,蛋疼的我都看不下去. ...