<!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. eclipse设置项目编码

    首先Windows->Preferences, 然后选择General下面的Workspace. Text file encoding选择Other GBK, 如果没有GBK的选项, 没关系, ...

  2. gulp 插件

    原文链接:http://www.mamicode.com/info-detail-517085.html gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具gr ...

  3. SQL Server Reporting Service(SSRS) 第一篇 我的第一个SSRS例子

    很早就知道SQL SERVER自带的报表工具SSRS,但一直没有用过,最近终于需要在工作中一展身手了,于是我特地按照自己的理解做了以下总结: 1. 安装软件结构 SSRS全称SQL Server Re ...

  4. sim800 gprs发送数据的AT流程

    switch(send_flag) { case 1: uart_send(&huart4,"AT\r\n",4); //AT break; case 2: uart_se ...

  5. centos5.11 repo 安装mysql5.7

    http://dev.mysql.com/doc/refman/5.7/en/linux-installation-yum-repo.html mysql yum repo 安装说明 http://d ...

  6. zookeeper 应用

    一,启动一个zk客户端 zookeeper/bin/zkCli.sh ls /  查看根目录下所有节点 create /znode data  创建节点znode,并添加数据内容为data ls /z ...

  7. iptables 端口转发

    sudo iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-ports 8080

  8. 4.AE中的缩放，书签

    1.书签 private void textBox1_TextChanged(object sender, EventArgs e) { if (txtBookmark.Text == "& ...

  9. linux工具apt、yum和dnf运用

      首先,说明一下我的环境:ubuntu16.04. 什么是APT: 高级包装工具(英语:Advanced Packaging Tools,简称:APT)是Debian及其衍生发行版(如:ubuntu ...

  10. css中vw,vh单位对于UC的兼容性问题

    vw,vh单位在移动端浏览器不兼容,在网上找半天也没找到什么官方的解决方法:我就试了一下在使用到vh的单位之前添加一个用px定义的样式: 如: 当浏览器不是别100vw单位的时候 就会赋给px单位的样 ...