请选择 进入手机版 | 继续访问电脑版

CSS3实现球体旋转

发表于 2016-11-09 13:39 显示全部楼层 74 2228

本帖最后由 欧水萍 于 2016-11-11 15:11 编辑

CSS3实现球体旋转

本教程简述如何用CSS3实现旋转的球体


效果如下图所示,球体沿着中间的轴旋转:



blob.png



要理解的知识点


1 三维空间的透视属性

css属性:perspective

perspective 属性有两个值,none 和 自己定义的具体像素,例如1000px。

注意:当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身,所以我们可以把这个属性理解为照相机和被拍摄物体的距离,CSS3 3D 变换中透视的透视点是在浏览器的前方,当我们设置它的值为具体数值的时候,其子元素就会具有近大远小,近实远虚的效果。

目前这个属性对浏览器支持还不算太好,只有Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

2 css属性transform-style

这个属性浏览器支持情况良好,除了ie浏览器,其他浏览器都支持。Firefox 支持 transform-style 属性,而Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性。

transform-style属性是设置其子元素是否保留3d位置的。

它也是有两个值:

1 默认值是flat,表示其子元素不保留3d位置。

2另一个值是preserve-3d,当元素设置了这个值的时候,其子元素就相当于进入了三维空间。



如图所示:

blob.png



x轴表示横向的轴

y轴表示纵向的轴

z轴其实就是我们的视线,是与我们直视的水平面垂直的


如果一个元素沿着x轴旋转,可以想象成奥运单杆运动员那样运动~

如果一个元素沿着y轴旋转,可以想象成公园旋转木马沿着中间的柱子绕圈圈~

而元素沿着z轴旋转的话更好理解了,可以想象成视线正前方,有一个风扇,风扇的扇叶就是沿着z轴旋转的~



关于3d的一些相关属性,介绍完毕,那么开始案例制作


结构和样式

(代码如下,具体属性都添加了对应注释)




<!doctype html>
<html>
<head>
      <meta charset="UTF-8">
      <title>ball</title>
    <style>
      *{padding: 0; margin: 0; list-style: none; border: 0;}
      body{background:#000;}
      /* 设置透视盒子在浏览器水平和垂直都居中 */
      .ball{
           width: 300px;
          height: 300px;
           position:absolute;
           left: 50%; top: 50%;
           margin-left: -150px;
           margin-top: -150px;
           perspective:3000px;
           -webkit-perspective:3000px;
       }
       /* 设置此元素子元素保留3d位置 */
      .ball_in{
           position:absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
            transform-style:preserve-3d;
      }
      /* 实体化这些li,然后设置其为圆形 */
      .ball_in li{
           position:absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           border: 1px solid #fff;
            border-radius:50%;
          
      }
      /* 对不同的li沿着y轴旋转不同的角度,其实圆球体就出来了 */
      /* 5个li元素,所以每个旋转的角度是360/2/5=36deg */
      .ball_in li:nth-child(1){transform:rotateY(0);}
      .ball_in li:nth-child(2){transform:rotateY(36deg);}
      .ball_in li:nth-child(3){transform:rotateY(72deg);}
      .ball_in li:nth-child(4){transform:rotateY(108deg);}
      .ball_in li:nth-child(5){transform:rotateY(144deg);}
    </style>
</head>
<body>
 
<div><!--设置透视属性的盒子,其子元素将具有透视效果-->
      <ul><!--设置其子元素保留3d位置的元素-->
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
     
</body>
</html>



效果如图:


blob.png



此时我们给球体整体则.ball_in元素沿着x轴向前倾斜和沿着z轴向左倾斜一定角度,则立体感更强。


代码:

    .ball_in{
           position:absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           transform-style:preserve-3d;
           /* 球体向前倾斜30deg,向左倾斜30deg */
           transform:rotateX(-30deg) rotateZ(-30deg);
      }


效果如图:


blob.png



利用伪元素给球体添加中心轴,代码如下:


      /* 利用伪元素给球体添加中心轴 */
      .ball_in:after{
           content:"";
           position:absolute;
           width: 2px;
           height:500px;
           background:blue;
           left:150px;
           top:-100px;  
      }


效果如图:


blob.png




最后步骤,给每个li添加颜色和整个球体添加旋转的动画:


整个球体添加旋转的动画代码如下:

 

 


.ball_in{
           position:absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           transform-style:preserve-3d;
           -webkit-transform-style:preserve-3d;
           /* 球体向前倾斜30deg,向左倾斜30deg */
           transform:rotateX(-30deg) rotateZ(-30deg);
            /* 球体旋转动画 */
           animation:circle 10s linear infinite;
      }
      /* 定义旋转动画 */
      @keyframes circle{
           0%{transform:rotateX(-30deg) rotateZ(-30deg) rotateY(0);}
           100%{transform:rotateX(-30deg) rotateZ(-30deg) rotateY(360deg);}
      }




最终效果如图:


(绕着y轴转圈圈)


blob.png



是否觉得五颜六色的球体没意思?


其实还可以改装一下,搞点小意思,例如球体不需要那么多个面,然后把剩余的面换成好看的图片,改装后效果如图:


blob.png


有没有一种cd在三维空间旋转的感觉?

 

又或者我们再改装一下,效果如下图:


blob.png


blob.png


blob.png



好了,最后奉上案例源码,有兴趣的朋友可以自行下载。


下载链接: http://pan.baidu.com/s/1mirZHnq 


(回复本帖子获取密码)



游客,如果您要查看本帖隐藏内容请回复




想要了解小码哥网页ui学院更多课程,可以到此链接:


http://www.520it.com/special/ui





回复 使用道具
举报
benjamin

发表于 06-05 17:46 显示全部楼层

顶顶顶顶

回复 支持 反对 使用道具
举报
枫丹

发表于 05-27 15:02 显示全部楼层

葵花点赞手
回复 支持 反对 使用道具
举报
胖子

发表于 05-24 13:21 显示全部楼层

你逼的 

回复 支持 反对 使用道具
举报
scj麦子

发表于 05-17 22:21 显示全部楼层

不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错不错

回复 支持 反对 使用道具
举报
gg-shuige

发表于 05-14 18:57 显示全部楼层

请问提取码是什么?


回复 支持 反对 使用道具
举报
qqqqqqqqqqq

发表于 05-11 09:11 显示全部楼层

下载链接打不开


回复 支持 反对 使用道具
举报
qqqqqqqqqqq

发表于 05-11 09:01 显示全部楼层

密码???
回复 支持 反对 使用道具
举报
yaopulove

发表于 04-24 14:34 显示全部楼层

学习学习

回复 支持 反对 使用道具
举报
djhuawuxin

发表于 04-23 16:40 显示全部楼层

: CSS3实现球体旋转 [


回复 支持 反对 使用道具
举报

发表新文章
欧水萍

小码哥名师团队

0

学分

1433

学币

1573

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1573
Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育