CSS3实现3D球体旋转动画
2024-09-04 15:54:05
html
<div class="ball-box">
<div class="ball">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
</div>
</div>
css
<style type="text/css">
body{
background-color: #000000;
}
.ball-box{
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin: -150px 0 0 -150px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
-webkit-perspective: 3000px;
-moz-perspective: 3000px;
-ms-perspective: 3000px;
-o-perspective: 3000px;
perspective: 3000px;
}
@-webkit-keyframes rotate3d {
0%{
-webkit-transform: rotateZ(-30deg) rotateY(0deg);
-moz-transform: rotateZ(-30deg) rotateY(0deg);
-ms-transform: rotateZ(-30deg) rotateY(0deg);
-o-transform: rotateZ(-30deg) rotateY(0deg);
transform: rotateZ(-30deg) rotateY(0deg);
}
100%{
-webkit-transform: rotateZ(-30deg) rotateY(360deg);
-moz-transform: rotateZ(-30deg) rotateY(360deg);
-ms-transform: rotateZ(-30deg) rotateY(360deg);
-o-transform: rotateZ(-30deg) rotateY(360deg);
transform: rotateZ(-30deg) rotateY(360deg);
}
}
@-moz-keyframes rotate3d {
0%{
-webkit-transform: rotateZ(-30deg) rotateY(0deg);
-moz-transform: rotateZ(-30deg) rotateY(0deg);
-ms-transform: rotateZ(-30deg) rotateY(0deg);
-o-transform: rotateZ(-30deg) rotateY(0deg);
transform: rotateZ(-30deg) rotateY(0deg);
}
100%{
-webkit-transform: rotateZ(-30deg) rotateY(360deg);
-moz-transform: rotateZ(-30deg) rotateY(360deg);
-ms-transform: rotateZ(-30deg) rotateY(360deg);
-o-transform: rotateZ(-30deg) rotateY(360deg);
transform: rotateZ(-30deg) rotateY(360deg);
}
}
@-ms-keyframes rotate3d {
0%{
-webkit-transform: rotateZ(-30deg) rotateY(0deg);
-moz-transform: rotateZ(-30deg) rotateY(0deg);
-ms-transform: rotateZ(-30deg) rotateY(0deg);
-o-transform: rotateZ(-30deg) rotateY(0deg);
transform: rotateZ(-30deg) rotateY(0deg);
}
100%{
-webkit-transform: rotateZ(-30deg) rotateY(360deg);
-moz-transform: rotateZ(-30deg) rotateY(360deg);
-ms-transform: rotateZ(-30deg) rotateY(360deg);
-o-transform: rotateZ(-30deg) rotateY(360deg);
transform: rotateZ(-30deg) rotateY(360deg);
}
}
@-o-keyframes rotate3d {
0%{
-webkit-transform: rotateZ(-30deg) rotateY(0deg);
-moz-transform: rotateZ(-30deg) rotateY(0deg);
-ms-transform: rotateZ(-30deg) rotateY(0deg);
-o-transform: rotateZ(-30deg) rotateY(0deg);
transform: rotateZ(-30deg) rotateY(0deg);
}
100%{
-webkit-transform: rotateZ(-30deg) rotateY(360deg);
-moz-transform: rotateZ(-30deg) rotateY(360deg);
-ms-transform: rotateZ(-30deg) rotateY(360deg);
-o-transform: rotateZ(-30deg) rotateY(360deg);
transform: rotateZ(-30deg) rotateY(360deg);
}
}
@keyframes rotate3d {
0%{
-webkit-transform: rotateZ(-30deg) rotateY(0deg);
-moz-transform: rotateZ(-30deg) rotateY(0deg);
-ms-transform: rotateZ(-30deg) rotateY(0deg);
-o-transform: rotateZ(-30deg) rotateY(0deg);
transform: rotateZ(-30deg) rotateY(0deg);
}
100%{
-webkit-transform: rotateZ(-30deg) rotateY(360deg);
-moz-transform: rotateZ(-30deg) rotateY(360deg);
-ms-transform: rotateZ(-30deg) rotateY(360deg);
-o-transform: rotateZ(-30deg) rotateY(360deg);
transform: rotateZ(-30deg) rotateY(360deg);
}
}
.ball{
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: rotate3d 30s linear infinite;
-moz-animation: rotate3d 30s linear infinite;
-ms-animation: rotate3d 30s linear infinite;
-o-animation: rotate3d 30s linear infinite;
animation: rotate3d 30s linear infinite;
}
.ball:after{
display: block;
content: '';
width: 1px;
height: 500px;
background-color: #ff0;
position: absolute;
top: -100px;
left: 150px;
}
.ball > div{
border: 1px #ffffff solid;
position: absolute;
width: 100%;
height: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.ball .line1{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.ball .line2{
-webkit-transform: rotateY(36deg);
-moz-transform: rotateY(36deg);
-ms-transform: rotateY(36deg);
-o-transform: rotateY(36deg);
transform: rotateY(36deg);
}
.ball .line3{
-webkit-transform: rotateY(72deg);
-moz-transform: rotateY(72deg);
-ms-transform: rotateY(72deg);
-o-transform: rotateY(72deg);
transform: rotateY(72deg);
}
.ball .line4{
-webkit-transform: rotateY(108deg);
-moz-transform: rotateY(108deg);
-ms-transform: rotateY(108deg);
-o-transform: rotateY(108deg);
transform: rotateY(108deg);
}
.ball .line1{
-webkit-transform: rotateY(144deg);
-moz-transform: rotateY(144deg);
-ms-transform: rotateY(144deg);
-o-transform: rotateY(144deg);
transform: rotateY(144deg);
}
</style>
最新文章
- TeamViewer12.0.71503(远程控制软件)精简版 单文件企业版介绍
- JS常用的设计模式(10)——模版方法模式
- .NET MVC通过反射获取数据修改历史记录，并插入数据表中
- C---数组名作函数参数
- JavaScript实现按键精灵
- 【ASP.NET MVC 学习笔记】- 13 Child Action
- [js高手之路] vue系列教程 - vue的基本用法与常见指令(1)
- 我们为什么要使用RabbitMQ？
- 同步下的资源互斥：停运保护（Run-Down Protection）机制
- 插件使用一进度条---nprogress
- springMVC接收参数的区别form data与query string parameters与request payload
- KVM虚拟化原理与基础应用示例
- ScheduledExecutorService的两种方法
- 《Linux内核分析》第三周学习报告
- jquery-序列化表单
- angularJs的工具方法1
- 【模板】区间dp
- Shiro - 关于session
- xib中Autolayout的使用
- 每天一个liunx命令2之rz和sz命令