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立方体的拖动旋转,并将旋转角度实时的反应至界面上显示实现原理:通过获取鼠 ...

随机推荐

Vim中 ctags 跳转直接跳到第一个匹配行的问题
意图用ctags搜索代码时, 用 ctrl + ] 后,只有一个匹配项直接跳转,有多个则列出所有匹配项选择跳转问题在 vim 中使用 ctags 是一个很令人舒服的事情,但有时一些默认的配置和不 ...
出租WiFi到底靠不靠谱？
创业是一种心态,也是不断的探索,他融入我们的生活,从日常中积累,从小微处启航. 一.背景交代最近在换工作,本周搬到新租的单身公寓,空间不大,倒是干净整洁.委托租房中介帮忙开通宽带,告知是电信网最低开 ...
【洛谷5292】[HNOI2019] 校园旅行（思维DP）
点此看题面大致题意: 给你一张无向图,每个点权值为\(0\)或\(1\),多组询问两点之间是否存在一条回文路径. 暴力\(DP\) 首先,看到\(n\)如此之小(\(n\le5000\)),便容易想 ...
深搜(DFS),Image Perimeters
题目链接:http://poj.org/problem?id=1111 解题报告: 1.这里深搜有一点要注意,对角线上的点,如果为'.',则total不应该增加,因为这不是他的边长. #include ...
Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法
添加新建.vue文件功能 ①Webstorm 右上角File-Plugins 搜索vue如果没有就去下载点击serch in repositories ②点击安装vue.js ③安装成功后点击右下角 ...
Intellij IDEA中Maven解决依赖失效
最近在折腾Maven和Sonatype的Nexus, 倒霉催的国内和公司网络... Nexus配合finalspeed或者kcptun倒是很给力, 但是Intellij就经常出问题, 出现红字也不动 ...
js判断手机登陆用户
uaredirect.js function uaredirect(f){try{if(document.getElementById("bdmark")!=null){retur ...
C#实现打印
C#实现导出pdf文件,打印 using System; using System.Collections.Generic; using System.Linq; using System.Web; ...
Windows无法安装到这个磁盘选中的磁盘具有MBR分区表解决方法
在安装 win10的时候,会出现这种提示:Windows 无法安装到这个磁盘.选中的磁盘具有 MBR 分区表.在 EFI 系统上, Windows 只能安装到 GPT 磁盘.出现这种情况主要是因为 ...
『ACM C++』 PTA 天梯赛练习集L1 | 016-017
今天开了两个大会,时间都给占掉了,就刷了两道题~ 明天加油!!! ------------------------------------------------L1-016------------- ...

CSS3实现3D球体旋转动画

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

随机推荐

热门专题