CSS3实现球体旋转.docx

CSS3实现球体旋转.docx

《CSS3实现球体旋转.docx》由会员分享，可在线阅读，更多相关《CSS3实现球体旋转.docx（14页珍藏版）》请在冰豆网上搜索。

CSS3实现球体旋转

CSS3实现球体旋转

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

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

要理解的知识点

1三维空间的透视属性

css属性：

perspective

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

注意：

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

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

2css属性transform-style

这个属性浏览器支持情况良好，除了ie浏览器，其他浏览器都支持。

Firefox支持transform-style属性，而Chrome、Safari和Opera支持替代的-webkit-transform-style属性。

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

它也是有两个值：

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

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

如图所示：

x轴表示横向的轴

y轴表示纵向的轴

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

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

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

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

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

结构和样式

（代码如下，具体属性都添加了对应注释）

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

doctype html>

      

效果如图：

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

代码：

1

2

3

4

5

6

7

8

9

10

    .ball_in{

           position:

absolute;

           left:

 0;

           top:

 0;

           width:

 100%;

           height:

 100%;

           transform-style:

preserve-3d;

           /* 球体向前倾斜30deg,向左倾斜30deg */

           transform:

rotateX（-30deg） rotateZ（-30deg）;

      }

效果如图：

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

1

2

3

4

5

6

7

8

9

10

      /* 利用伪元素给球体添加中心轴 */

      .ball_in:

after{

           content:

"";

           position:

absolute;

           width:

 2px;

           height:

500px;

           background:

blue;

           left:

150px;

           top:

-100px;  

      }

效果如图：

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

.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轴转圈圈）

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

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

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

又或者我们再改装一下，效果如下图：