CSS3实现3D球体旋转动画

html

<div class="ball-box">

    <div class="ball">

        <div class="line1"></div>

        <div class="line2"></div>

        <div class="line3"></div>

        <div class="line4"></div>

        <div class="line5"></div>

    </div>

</div>

css

<style type="text/css">

    body{

        background-color: #000000;

    }

    .ball-box{

        width: 300px;

        height: 300px;

        position: absolute;

        left: 50%;

        top: 50%;

        margin: -150px 0 0 -150px;

        -webkit-perspective-origin: 50% 50%;

        -moz-perspective-origin: 50% 50%;

        -ms-perspective-origin: 50% 50%;

        -o-perspective-origin: 50% 50%;

        perspective-origin: 50% 50%;

        -webkit-perspective: 3000px;

        -moz-perspective: 3000px;

        -ms-perspective: 3000px;

        -o-perspective: 3000px;

        perspective: 3000px;

    }

    @-webkit-keyframes rotate3d {

        0%{

            -webkit-transform: rotateZ(-30deg) rotateY(0deg);

            -moz-transform: rotateZ(-30deg) rotateY(0deg);

            -ms-transform: rotateZ(-30deg) rotateY(0deg);

            -o-transform: rotateZ(-30deg) rotateY(0deg);

            transform: rotateZ(-30deg) rotateY(0deg);

        }

        100%{

            -webkit-transform: rotateZ(-30deg) rotateY(360deg);

            -moz-transform: rotateZ(-30deg) rotateY(360deg);

            -ms-transform: rotateZ(-30deg) rotateY(360deg);

            -o-transform: rotateZ(-30deg) rotateY(360deg);

            transform: rotateZ(-30deg) rotateY(360deg);

        }

    }

    @-moz-keyframes rotate3d {

        0%{

            -webkit-transform: rotateZ(-30deg) rotateY(0deg);

            -moz-transform: rotateZ(-30deg) rotateY(0deg);

            -ms-transform: rotateZ(-30deg) rotateY(0deg);

            -o-transform: rotateZ(-30deg) rotateY(0deg);

            transform: rotateZ(-30deg) rotateY(0deg);

        }

        100%{

            -webkit-transform: rotateZ(-30deg) rotateY(360deg);

            -moz-transform: rotateZ(-30deg) rotateY(360deg);

            -ms-transform: rotateZ(-30deg) rotateY(360deg);

            -o-transform: rotateZ(-30deg) rotateY(360deg);

            transform: rotateZ(-30deg) rotateY(360deg);

        }

    }

    @-ms-keyframes rotate3d {

        0%{

            -webkit-transform: rotateZ(-30deg) rotateY(0deg);

            -moz-transform: rotateZ(-30deg) rotateY(0deg);

            -ms-transform: rotateZ(-30deg) rotateY(0deg);

            -o-transform: rotateZ(-30deg) rotateY(0deg);

            transform: rotateZ(-30deg) rotateY(0deg);

        }

        100%{

            -webkit-transform: rotateZ(-30deg) rotateY(360deg);

            -moz-transform: rotateZ(-30deg) rotateY(360deg);

            -ms-transform: rotateZ(-30deg) rotateY(360deg);

            -o-transform: rotateZ(-30deg) rotateY(360deg);

            transform: rotateZ(-30deg) rotateY(360deg);

        }

    }

    @-o-keyframes rotate3d {

        0%{

            -webkit-transform: rotateZ(-30deg) rotateY(0deg);

            -moz-transform: rotateZ(-30deg) rotateY(0deg);

            -ms-transform: rotateZ(-30deg) rotateY(0deg);

            -o-transform: rotateZ(-30deg) rotateY(0deg);

            transform: rotateZ(-30deg) rotateY(0deg);

        }

        100%{

            -webkit-transform: rotateZ(-30deg) rotateY(360deg);

            -moz-transform: rotateZ(-30deg) rotateY(360deg);

            -ms-transform: rotateZ(-30deg) rotateY(360deg);

            -o-transform: rotateZ(-30deg) rotateY(360deg);

            transform: rotateZ(-30deg) rotateY(360deg);

        }

    }

    @keyframes rotate3d {

        0%{

            -webkit-transform: rotateZ(-30deg) rotateY(0deg);

            -moz-transform: rotateZ(-30deg) rotateY(0deg);

            -ms-transform: rotateZ(-30deg) rotateY(0deg);

            -o-transform: rotateZ(-30deg) rotateY(0deg);

            transform: rotateZ(-30deg) rotateY(0deg);

        }

        100%{

            -webkit-transform: rotateZ(-30deg) rotateY(360deg);

            -moz-transform: rotateZ(-30deg) rotateY(360deg);

            -ms-transform: rotateZ(-30deg) rotateY(360deg);

            -o-transform: rotateZ(-30deg) rotateY(360deg);

            transform: rotateZ(-30deg) rotateY(360deg);

        }

    }

    .ball{

        height: 100%;

        -webkit-transform-style: preserve-3d;

        -moz-transform-style: preserve-3d;

        -ms-transform-style: preserve-3d;

        transform-style: preserve-3d;

        -webkit-animation: rotate3d 30s linear infinite;

        -moz-animation: rotate3d 30s linear infinite;

        -ms-animation: rotate3d 30s linear infinite;

        -o-animation: rotate3d 30s linear infinite;

        animation: rotate3d 30s linear infinite;

    }

    .ball:after{

        display: block;

        content: '';

        width: 1px;

        height: 500px;

        background-color: #ff0;

        position: absolute;

        top: -100px;

        left: 150px;

    }

    .ball > div{

        border: 1px #ffffff solid;

        position: absolute;

        width: 100%;

        height: 100%;

        -webkit-border-radius: 50%;

        -moz-border-radius: 50%;

        border-radius: 50%;

    }

    .ball .line1{

        -webkit-transform: rotateY(0deg);

        -moz-transform: rotateY(0deg);

        -ms-transform: rotateY(0deg);

        -o-transform: rotateY(0deg);

        transform: rotateY(0deg);

    }

    .ball .line2{

        -webkit-transform: rotateY(36deg);

        -moz-transform: rotateY(36deg);

        -ms-transform: rotateY(36deg);

        -o-transform: rotateY(36deg);

        transform: rotateY(36deg);

    }

    .ball .line3{

        -webkit-transform: rotateY(72deg);

        -moz-transform: rotateY(72deg);

        -ms-transform: rotateY(72deg);

        -o-transform: rotateY(72deg);

        transform: rotateY(72deg);

    }

    .ball .line4{

        -webkit-transform: rotateY(108deg);

        -moz-transform: rotateY(108deg);

        -ms-transform: rotateY(108deg);

        -o-transform: rotateY(108deg);

        transform: rotateY(108deg);

    }

    .ball .line1{

        -webkit-transform: rotateY(144deg);

        -moz-transform: rotateY(144deg);

        -ms-transform: rotateY(144deg);

        -o-transform: rotateY(144deg);

        transform: rotateY(144deg);

    }

</style>

CSS3实现3D球体旋转动画的更多相关文章

CSS3实现3D木块旋转动画
CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...
基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
超绚丽CSS3多色彩发光立方体旋转动画
CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.css3动画的属性主要分为三类:transform.transition以及anim ...
HTML5 CSS3 诱人的实例： 3D立方体旋转动画
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34120047 创意来自:http://www.html5tricks.com/d ...
jquery和CSS3带倒影的3D万花筒旋转动画特效效果演示
<!DOCTYPE html> <html> <head> <title></title> <meta charset='utf-8' ...
jquery+css3实现3d滚动旋转
最近有个漂亮妹子一直在向我推销潭州的视频,BUT我以前就看了一次觉得挺水的,就对那个妹子表示吾孤高.你们那玩意没意义的很弱.然后那个漂亮妹子锲而不舍的对我发链接,这个效果会吗,这个幻灯会写吗...我也 ...
Js_实现3D球体旋转
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
3D立方体旋转动画
在线演示本地下载
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示实现原理:通过获取鼠 ...

随机推荐

出租WiFi到底靠不靠谱？
创业是一种心态,也是不断的探索,他融入我们的生活,从日常中积累,从小微处启航. 一.背景交代最近在换工作,本周搬到新租的单身公寓,空间不大,倒是干净整洁.委托租房中介帮忙开通宽带,告知是电信网最低开 ...
C/C++ memmove与memcpy的区别及实现
1.与字符串函数strcpy区别: memcpy与memmove都是对内存进行拷贝可以拷贝任何内容,而strcpy仅是对字符串进行操作. memcpy与memmove拷贝多少是通过其第三个参数进行控制 ...
【[SCOI2015]情报传递】
非常无脑的板子题,就当是练一下板子我们可以先将所有的操作离线下来,之后那些搜集过情报的点就有了点权,对于查询操作,就是查询一下这条路径上有几个点点权满足\(st<=now-C+1\) #inc ...
字符ASCII转换
实现效果: 关键知识: 实现代码: private void button1_Click(object sender, EventArgs e) { if (textBox1.Text != stri ...
2018.11.1 Hibernate中的Mapper关系映射文件
Customer.hbm.xml 基本的参数都在里面了 <?xml version="1.0" encoding="UTF-8"?> <!DO ...
Gulp 方法
Gulp有5个基本方法:src.dest.task.run.watch Gulp.src() gulp模块的src方法,用于产生数据流.它的参数表示索要处理的文件,一般有以下几种形式: js ...
JDBC执行存储过程的四种情况 (转)
本文主要是总结如何实现 JDBC调用Oracle的存储过程,从以下情况分别介绍: [1].只有输入IN参数,没有输出OUT参数 [2].既有输入IN参数,也有输出OUT参数,输出是简单值(非列表) ...
TDD: 解除依赖
1 A类依赖B 类,可以把B类提取成IB接口,解除AB 之间的依赖关系. 通过创建实现了IB接口的BStub 装代码,可以模拟B类进行测试. 这是针对接口编程的典型.适合构造代价大,变化多的情况.应 ...
data-ng-disabled指令
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
c语言描述的二分插入排序法
#include<stdio.h> #include<stdlib.h> //二分插入排序法 void BinsertSort(int a[],int n){ int low, ...

CSS3实现3D球体旋转动画

CSS3实现3D球体旋转动画的更多相关文章

随机推荐

热门专题