CSS 3 d实现旋转球的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
废话不多说了,直接给大家贴代码了,具体代码如下所示:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=utf - 8/比;
& lt; title> zimv-css 3 d ball
& lt;/head>
& lt; style>
身体{
填充:100 px 0 0 150 px;
}
& lt;/style>
& lt; body>
类& lt; p=皐rapper"祝辞
类& lt; p=癰ox"id=癱ircles"比;
& lt;/p>
& lt;/p>
& lt; style>
.wrapper {
动画:旋转3 s无限线性交替;
传输格式:preserve-3d;
宽度:100 px;
身高:100 px;
保证金:150 px 0 0 150 px;
}
.box {
宽度:100%;
高度:100%;
位置:相对;
传输格式:preserve-3d;
变换:rotateX(-30度)rotateY(45度);
}
.circle {
这个特性:50%;
宽度:100%;
高度:100%;
位置:绝对的;
左:0;
上图:0;
边界:1 px固体红;
}
@keyframes旋转{
0% {
变换:rotateZ(0度);
}
50% {
变换:rotateZ(360度);
}
100% {
变换:rotateZ(360度)rotateX(180度);
}
}
& lt;/style>
& lt; script>
让cir=. getelementbyid(& # 39;圈# 39;);
(让我=0;i<180;我+ +){
让p=document.createElement (& # 39; p # 39;);
p。风格='变换:rotateX(${我}度);边界:1 px固体rgba (200200200 1)”;
p。className=& # 39;圆# 39;;
cir.appendChild (p);
}
& lt;/script>
& lt;/body>
& lt;/html> 感谢各位的阅读!看完上述内容,你们对CSS 3 d实现旋转球的方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。
