首页 > 英语园地

CSS3实现球体旋转

更新时间:2023-05-14 13:40:50 阅读：评论：0

CSS3实现球体旋转

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

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

要理解的知识点

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另一个值是prerve-3d，当元素设置了这个值的时候，其子元素就相当于进入了三维空间。

如图所示：

x轴表示横向的轴

y轴表示纵向的轴

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

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

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

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

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

结构和样式

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

8forgotten

商务英语15

概率论复习17

<!doctype html>

<html>

英语信件格式

<head>

<style>

*{padding: 0; margin: 0; list-style: none; border: 0;}

body{background:#000;}

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

.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%;

shuanheight: 100%;

transform-style:prerve-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>ppst

</head>

goodway

<body>

<div>

<ul>

</ul>

</div>

</注入body>

</html>

本文发布于:2023-05-14 13:40:50，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/fan/78/627870.html

上一篇：因子分析基本

下一篇：clean的用法和短语例句

标签：元素属性旋转浏览器透视设置

留言与评论（共有 0 条评论）