html编写旋转的球,CSS 3D实现旋转球的方法

CSS 3D实现旋转球的方法

发布时间：2020-09-10 11:19:21

来源：亿速云

阅读：143

作者：小新

CSS 3D实现旋转球的方法？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

废话不多说了，直接给大家贴代码了，具体代码如下所示：

zimv-css 3d ball

body{

padding: 100px 0 0 150px;

}

.wrapper{

animation: rotate 3s infinite linear alternate;

transform-style: preserve-3d;

width: 100px;

height: 100px;

margin:150px 0 0 150px;

}

.box{

width: 100%;

height: 100%;

position: relative;

transform-style: preserve-3d;

transform: rotateX(-30deg) rotateY(45deg);

}

.circle{

border-radius: 50%;

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

border: 1px solid red;

}

@keyframes rotate {

0% {

transform: rotateZ(0deg);

}

50%{

transform: rotateZ(360deg);

}

100% {

transform: rotateZ(360deg) rotateX(180deg);

}

}

let cir = document.getElementById('circles');

for(let i=0;i<180;i++){

let p = document.createElement('p');

p.style = `transform: rotateX(${i}deg);border: 1px solid rgba(200,200,200,1)`;

p.className = 'circle';

cir.appendChild(p);

}

感谢各位的阅读！看完上述内容，你们对CSS 3D实现旋转球的方法大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注亿速云行业资讯频道。