html3d球体旋转介绍,CSS3实现3D球体旋转动画

最新推荐文章于 2023-04-12 19:58:00 发布
最新推荐文章于 2023-04-12 19:58:00 发布
阅读量794 收藏 1
点赞数
文章标签： HTML CSS 3D动画 关键帧 transform

html

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);

}

趙是我妻
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3橙色球形_CSS3实现3D球体旋转动画
weixin_35618196的博客
12-23 486
htmlcssbody{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:...
css3实现球体,CSS3实现3D球体旋转动画
weixin_39614546的博客
08-03 1154
body{background-color: #000000;}.ball-box{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-p...
HTML 3D效果+形变动态（球体、立方体、螺旋体、层次模型）
breakCSDN的博客
10-30 2622
文章主要实现了立方体、球体、螺旋体、层次体的3D模型 主要是使用： -webkit-perspective:1000px;/*透视距*/ transform-style: preserve-3d;/*指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。*/ transform对3D模型进行操作；
HTML5 CSS3实现3D感极强的彩色立体文字.rar
07-10
HTML5 CSS3实现3D感极强的彩色立体文字源码，这个效果超赞啊，这种三维风格我很喜欢，而且颜色很鲜艳，当然了，字符的颜色可以自己定义，具体请参见HTML演示文件，文字内容的自定义也很方便，在HTML中输入文字内容即可。在CSS和JS中可修改三维效果选项，鼠标滑过文字时，文字响应鼠标，会晃动。本效果支持移动端和PC端的HTML5浏览器。源码完整。
html、css和JavaScript实现3D动态球体
weixin_42532983的博客
04-12 813
利用css3动画属性以及es6的模板字符串创建3D动态球体
（纯css3实现）3d效果----环中心球形图片旋转 中心球形图片前面的元素透明度为1 图片后面透明度为0.1
weixin_57145577的博客
08-31 2933
图片示例 html <!-- 转动区域 --> <section id="slideshow"> <div class="entire-content"> <div class="content-carrousel"> <div class="shadow" v-for="(item,index) in funList" @click="toPage(item)"> <svg-icon :icon-class="item
纯css3 3D旋转科技球体动画特效
11-03
【纯CSS3 3D旋转科技球体动画特效】是一种利用现代浏览器支持的CSS3特性实现的视觉效果，它能够创建出引人入胜、富有动态感的科技风格球体旋转展示。在网页设计和开发中，这样的特效可以增强用户体验，使网站或应用...
CSS3 3D伸缩线条球体动画特效
06-24
【CSS3 3D伸缩线条球体动画特效】是一种利用现代浏览器支持的CSS3技术实现的创新视觉效果。此特效展示了线条在3D空间中动态伸缩并围绕球体旋转的迷人场景，为网页增添了一种立体且富有活力的交互体验。 在CSS3中，...
CSS3制作3D旋转科幻球体动画特效.zip
07-11
例如，要创建一个球体旋转动画，可以在`@keyframes`规则中指定不同时间点的旋转角度，如0%和100%。 ```css @keyframes rotateSphere { 0% { transform: rotateX(0deg) rotateY(0deg); } 100% { transform: ...
HTML5 3D旋转球体
10-25
以上就是关于“HTML5 3D旋转球体”的主要知识点，实际项目中还需要结合CSS3、响应式设计等技术，以适应不同设备的显示需求。通过不断实践和学习，你将能够创建出更加复杂和引人入胜的3D图形效果。
纯CSS3制作3D旋转球体
11-04
总结来说，纯CSS3制作3D旋转球体涉及的关键知识点有：`transform`属性、`rotateX`和`rotateY`用于3D旋转、`perspective`定义观察者视角、`animation`实现动态效果以及`border-radius`创建圆形。通过巧妙地组合这些...
CSS3实现3D球体旋转动画
weixin_30780649的博客
02-03 1223
html <div class="ball-box"> <div class="ball"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></...
css的rotate3d实现炫酷的圆环转动动画
热门推荐
苏苏就是小苏苏的博客
08-28 1万+
css的rotate3d实现炫酷的圆环转动动画
如何用div实现炫酷3D球体？
Y_one的博客
09-29 1174
话不多说，直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D球体</title> <style> html{ background: bla...
CSS3D--球体
哈喽234的博客
04-01 3336
3D球体
html3d球体旋转特效代码,CSS 3D实现旋转球是如何实现的？（代码案例）
weixin_39619433的博客
06-05 1043
本篇文章给大家带来的内容是关于CSS 3D实现旋转球是如何实现的？(代码案例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。废话不多说了，直接给大家贴代码了，具体代码如下所示：zimv-css 3d ballbody{padding: 100px 0 0 150px;}.wrapper{animation: rotate 3s infinite linear alternate;...
CSS环绕球体的旋转文字-3D效果
findhappy117的博客
01-30 6537
代码下载地址： http://www.demodashi.com/demo/12482.html 项目文件结构截图 只需要一个html文件既可： 项目截图： 代码实现原理： 该示例的实现过程很简单，主要是使用了CSS3的透视、3D旋转、位移、渐变、阴影，可以说是一次比较全面的练习。 HTML部分： div class="wrapper"> div c
JavaScript 音乐播放器及其源代码.zip
最新发布
07-22
项目：带有源代码的 JavaScript 音乐播放器 JavaScript 音乐播放器是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这个项目很有趣。在这里，用户可以通过单击不同颜色的图块来播放不同类型的曲调，并欣赏音乐的声音。此外，用户可以像钢琴一样使用它们来生成不同的曲调。   项目制作 音乐播放器项目仅包含 HTML、CSS 和 JavaScript。谈到该系统的功能，用户可以播放不同类型的音乐。您只需单击不同颜色的图块即可收听音乐。该项目包含大量 JavaScript，用于使项目正常运行。 如何运行该项目？ 要运行此项目，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要运行此系统，首先，通过单击 index.html 文件在浏览器中打开项目。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
鸿蒙开发健康app案例
07-22
该项目是记录用户日常饮食情况，以及针对不同食物摄入营养不同会有对应的营养摄入情况和日常运动消耗情况，用户可以自己添加食品以及对应的热量。 主要有登陆界面，饮食统计页面，食物列表页 登陆界面首先是进入欢迎界面，然后加载首选项，用户同意授权进入首页，否则弹出用户协议，同意保存首选项，否则就跳出app 饮食统计界面，进入首页之后，用户可以选择日期和获取当前日期来加载饮食记录，饮食记录会展示热量统计，营养统计和分组展示饮食记录 食物列表页展示食物列表以及可以填写食物数量和跳转到食物详情页
HTML文字阴影荧光,纯CSS实现的带阴影和高亮光效的逼真3D球体
05-16
要实现带阴影和高亮光效的逼真3D球体，可以使用纯CSS和一些HTML元素来创建。以下是一个示例代码： HTML代码： ```html <div class="sphere"> <div class="shadow"></div> <div class="highlight"></div> </div> ``` CSS代码： ```css .sphere { position: relative; width: 100px; height: 100px; border-radius: 50%; background-color: #ccc; transform-style: preserve-3d; animation: rotate 10s infinite linear; } .shadow { position: absolute; bottom: -10px; width: 100%; height: 20px; border-radius: 50%; background-color: rgba(0,0,0,0.3); transform: translateZ(-10px); } .highlight { position: absolute; top: -10px; width: 100%; height: 20px; border-radius: 50%; background-color: rgba(255,255,255,0.5); transform: translateZ(10px); } @keyframes rotate { from { transform: rotateX(0) rotateY(0); } to { transform: rotateX(360deg) rotateY(360deg); } } ``` 上述代码中，`.sphere` 类指定了球体的基本样式，包括宽度、高度、边框半径、背景颜色和 3D 变换。`.shadow` 类和 `.highlight` 类分别指定阴影和高亮光效的样式，包括位置、大小、圆角和透明度。`@keyframes` 规则定义了球体的旋转动画。最终的效果如下图所示： ![3D球体](https://img-blog.csdnimg.cn/20210513181419263.gif)

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值