CSS3实现球体旋转

本教程介绍了如何使用CSS3实现旋转球。

效果如下所示。,球体沿中轴线旋转。:

了解知识点

1 三维空间透视性质
css属性:perspective
perspective 属性有两个值。,none 和 由自己定义的特定像素,例如,1000 px。
注意:定义元素时 perspective 属性时间,子元素将获得透视效果。,而不是元素本身。,所以我们可以把这个属性理解为照相机和被拍摄物体的距离,CSS3 3D 视角转换是在浏览器前面。,当我们将其值设置为特定值时,,它的子元素将有近大或小的尺寸。,近实效应。
这个属性目前在浏览器支持方面不太好。,唯铬 和 Safari 支持备选方案 -webkit-perspective 属性。
2 属性转换样式
此属性浏览器支持良好的性能。,除了IE浏览器之外,其他浏览器支持。。Firefox 支持 transform-style 属性,铬、Safari 和 Opera 支持备选方案 -webkit-transform-style 属性。
转换样式属性是设置其子元素以保留3D P。。
它也有两个值。:
1 默认值是平坦的。,指示其子元素不保留3D位置。。
2另一个值是保存3D,当元素设置值时,,子元素相当于三维空间。。

如图所示:

1478668191101972.png



X轴代表水平轴。
y轴表示纵轴。
Z轴实际上是我们的视线。,它垂直于我们所看到的水平面。


如果一个元素沿着X轴旋转,可以想象为奥运会单人运动员。
如果一个元素沿y轴旋转,可以想象为一个公园旋转木桩中间的柱子。
元素沿着Z轴旋转。,想象一下向前看。,有一个风扇。,风扇叶片沿Z轴旋转。

3D的一些相关属性,介绍完成,所以开始案例制作。

结构和样式
(代码如下),使用相应的注释添加特定属性。




      
      ball
    


  

效果如下:


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

代码:


    
.ball_in{

           
位置:绝对

           
left: 0;

           
top: 0;

           
width: 100%;

           
height: 100%;

           
transform-style:preserve-3d;

           
/* 球向前倾斜30度。,向左倾斜30度 */

           
transform:rotateX(-30deg) rotateZ(-30deg);

      
}

效果如下:

使用伪元素将中心轴添加到球体上,代码如下:


      
/* 使用伪元素将中心轴添加到球体上 */

      
.ball_in:after{

           
content:"";

           
位置:绝对

           
width: 2px;

           
height:500px;

           
背景:蓝色

           
left:150px;

           
top:-100px;  

      
}

效果如下:

最后步骤,为每个李添加颜色,并向整个球体添加旋转动画。:

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


.ball_in{

           
位置:绝对

           
left: 0;

           
top: 0;

           
width: 100%;

           
height: 100%;

           
transform-style:preserve-3d;

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

           
/* 球向前倾斜30度。,向左倾斜30度 */

           
transform:rotateX(-30deg) rotateZ(-30deg);

            
/* 球面旋转动画 */

           
动画:圆圈 10秒 linear infinite;

      
}

      
/* 定义旋转动画 */

      
@keyframes circle{

           
0%{transform:rotateX(-30deg) rotateZ(-30deg) rotateY(0);}

           
100%{transform:rotateX(-30deg) rotateZ(-30deg) rotateY(360deg);}

      
}

最终效果如下:

(围绕Y轴旋转)

你觉得五彩缤纷的球体无聊吗?

事实上,它可以被修改。,做点有趣的事,例如,球面不需要这么多的面。,然后把剩下的脸变成一幅漂亮的图画。,改装后效果如下:

有没有CD在三个维度上旋转的感觉?

或者我们可以精炼它。,效果如下:

1478669201363704.png

1478669222125540.png

1478669242415643.png

好了,最后给出案例源代码。,有兴趣的朋友可以自己下载。。

来源:

This entry was posted in 威尼斯人网址. Bookmark the <a href="https://www.099dy.com/wnsrwz/4450.html" title="Permalink to CSS3实现球体旋转" rel="bookmark">permalink</a>.

发表评论

电子邮件地址不会被公开。 必填项已用*标注