CSS3实现球体旋转Word文档格式.docx

CSS3实现球体旋转Word文档格式.docx

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

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>

head>

meta 

charset="

UTF-8"

>

title>

ball<

/title>

style>

*{padding:

0;

margin:

list-style:

none;

border:

}

body{background:

#000;

/* 

设置透视盒子在浏览器水平和垂直都居中 

*/

.ball{

width:

300px;

height:

position:

absolute;

left:

50%;

top:

margin-left:

-150px;

margin-top:

perspective:

3000px;

-webkit-perspective:

设置此元素子元素保留3d位置 

.ball_in{

100%;

transform-style:

preserve-3d;

实体化这些li，然后设置其为圆形 

.ball_in 

li{

1px 

solid 

#fff;

border-radius:

对不同的li沿着y轴旋转不同的角度，其实圆球体就出来了 

5个li元素，所以每个旋转的角度是360/2/5=36deg 

li:

nth-child

（1）{transform:

rotateY（0）;

nth-child

（2）{transform:

rotateY（36deg）;

nth-child（3）{transform:

rotateY（72deg）;

nth-child（4）{transform:

rotateY（108deg）;

nth-child（5）{transform:

rotateY（144deg）;

/style>

/head>

body>

div>

--设置透视属性的盒子，其子元素将具有透视效果-->

ul>

--设置其子元素保留3d位置的元素-->

li>

/li>

/ul>

/div>

/body>

/html>

效果如图：

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

代码：

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

transform:

rotateX（-30deg） 

rotateZ（-30deg）;

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

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

.ball_in:

after{

content:

"

;

2px;

500px;

background:

blue;

150px;

-100px;

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

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

-webkit-transform-style:

球体旋转动画 

animation:

circle 

10s 

linear 

infinite;

定义旋转动画 

@keyframes 

circle{

0%{transform:

rotateZ（-30deg） 

100%{transform:

rotateY（360deg）;

最终效果如图：

（绕着y轴转圈圈）

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

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

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

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