<!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. goroutine

    Go语言从诞生到普及已经三年了,先行者大都是Web开发的背景,也有了一些普及型的书籍,可系统开发背景的人在学习这些书籍的时候,总有语焉不详的感觉,网上也有若干流传甚广的文章,可其中或多或少总有些与事实 ...

  2. commons-io ProxyInputStream,ProxyOutputStream,ProxyReader,ProxyWriter

    1.ProxyInputStream: A Proxy stream which acts as expected, that is it passes the method calls on to ...

  3. 实现PHPCMS手机门户的伪静态

    1.打开/phpcms/modules/wap/functions/global.func.php找到里面的这两个函数,如下图所示的注释掉的那行代码,在下面加入一行代码. function list_ ...

  4. SSAS 部署失败 总结

    今天部署微软官方的SSAS实例AdventureWorks Multidimensional Models SQL Server 2012到本地SQL SERVER数据库,报了好几个错误.总结一下给大 ...

  5. frame里的链接跳转

    <a href="javascript:parent.location='index_frame.html';void(0);">索引</a> <a ...

  6. MySQL 警告WARN: Establishing SSL connection without server's identity verification is not recommended.解决办法

    Fri Jun 17 13:46:54 CST 2016 WARN: Establishing SSL connection without server's identity verificatio ...

  7. MySQL update时使用联表，聚合

    原文地址 http://stackoverflow.com/questions/3022405/mysql-update-query-with-left-join-and-group-by UPDAT ...

  8. 实现断点续传的FTP下载类（支持多线程多任务下载）

    using System; using System.Collections.Generic; using System.Text; using System.Threading; using Sys ...

  9. ROS的单线程Spinning和多线程Spinning

    单线程Spinning ros::spin()是最简单的单线程自旋, 它会一直调用直到结束 用法:  ros::spin(); 另一个单线程spinning是ros::spinOnce(),它定期调用 ...

  10. 读javascript高级程序设计17-在线检测,cookie,子cookie

    一.在线状态检测 开发离线应用时,往往在离线状态时把数据存在本地,而在联机状态时再把数据发送到服务器.html5提供了检测在线状态的方法:navigator.onLine和online/offline ...