HTML_3d绕环

已于 2022-03-14 17:52:37 修改
阅读量88 收藏
点赞数
分类专栏： html 文章标签： HTML5 CSS3 3D动画 绕环效果 动画帧
于 2021-03-06 18:11:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47484523/article/details/114450253
版权

homework9 3d绕环

  • 3drh.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3d绕环</title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			body{
				background-color: black;
			}
			.main{
				width: 600px;
				height: 600px;
				/*border: 1px red solid;*/
				margin-left: auto;
				margin-right: auto;
				margin-top: 200px;
			}
			.r-no1{
				width: 600px;
				height: 600px;
				border: 3px red solid;
				border-radius: 300px;
				position: relative;
				transform-style: preserve-3d;   /*3d状态下,父级做了transform 子集也可以有单独的*/
				animation: myplay 8s infinite linear;
			}
			.r-no2{
				width: 80%;
				height: 80%;
				border: 2px plum solid;
				border-radius: 300px;
				position: absolute;
				top:10%;
				left:10%;
				transform:translateZ(-150px);
				/*animation: myplay 4s infinite linear;*/
			}
			.r-no3{
				width: 80%;
				height: 80%;
				border: 2px pink solid;
				border-radius: 300px;
				position: absolute;
				top:10%;
				left:10%;
				transform:translateZ(150px);
			}
			.g-no1{
				width: 600px;
				height: 600px;
				border: 3px green solid;
				border-radius: 300px;
				position: absolute;
				transform: rotateX(90deg);
			}
			.g-no2{
				width: 80%;
				height: 80%;
				border: 2px lightgreen solid;
				border-radius: 300px;
				position: absolute;
				top:10%;
				left:10%;
				transform: rotateX(90deg) translateZ(-150px);
			}
			.g-no3{
				width: 80%;
				height: 80%;
				border: 2px lawngreen solid;
				border-radius: 300px;
				position: absolute;
				top:10%;
				left:10%;
				transform: rotateX(90deg) translateZ(150px);
			}
			.b-no1{
				width: 600px;
				height: 600px;
				border: 3px blue solid;
				border-radius: 300px;
				position: absolute;
				transform: rotateY(90deg);
			}
			.b-no2{
				width: 80%;
				height: 80%;
				border: 2px cornflowerblue solid;
				border-radius: 300px;
				position: absolute;
				top:10%;
				left:10%;
				transform: rotateY(90deg) translateZ(-150px);
			}
			.b-no3{
				width: 80%;
				height: 80%;
				border: 2px deepskyblue solid;
				border-radius: 300px;
				position: absolute;
				top:10%;
				left:10%;
				transform: rotateY(90deg) translateZ(150px);
			}
			@keyframes myplay{
				100%{
					transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="r-no1">
				<div class="r-no2"></div>
				<div class="r-no3"></div>
				<div class="g-no1"></div>
				<div class="g-no2"></div>
				<div class="g-no3"></div>
				<div class="b-no1"></div>
				<div class="b-no2"></div>
				<div class="b-no3"></div>
			</div>
		</div>
	</body>
</html>

3d绕环的链接

在这里插入图片描述
在这里插入图片描述

SDWESCES
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5行星环绕,CSS3 星球环绕动画
weixin_34161139的博客
06-30 879
body {margin:0;padding:0;background:#080e24 url(./bg.jpg) repeat;}ul {width:600px;height:600px;margin:40px auto;position:relative;list-style:none;}ul li {border:2px solid #394057;position:absolute;lef...
html5 canvas碎片3D环绕地球天体运动动画特效.zip
07-11
代码片段： [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed]
3D圆环动态照片墙html文件
04-28
3D圆环动态照片墙html文件，鼠标可自由拖拽，某in爆火，添加30张jpg图片，浏览器直接打开，傻瓜式操作，效果精致。。。免费资源，可以拿去简单玩玩！！！
html圆环旋转效果,css3 div实现三维立体圆环旋转效果
weixin_34556619的博客
06-03 1114
圆环最好设计为扫描特效，转起来会很有感觉1、首先创建一个div 2、css样式.companydiV{position: absolute;top: -130px;/* left: 80px; */transform: skewY(0) rotateZ(88deg) rotateX(8deg) rotateY(-79deg);}3、css3动画@keyframes rollI...
HTML5立体圆环旋转动画 HTML5 3D效果
08-23
HTML5 3D动画效果非常多，我们在html5tricks上也分享过一些，比如3D HTML5 Logo动画，旋转效果非常逼真。今天我们来看一款基于HTML5的立体圆环旋转动画，该特效主要利用了CSS3的-webkit-transform-style属性，效果非常酷。
html5 圆形过渡到方形,HTML5/Canvas使用方形构建的3D圆环
weixin_42336892的博客
06-20 370
JavaScript语言：JaveScriptBabelCoffeeScript确定var canvas = document.getElementsByTagName('canvas')[0];var ctx = canvas.getContext('2d');canvas.width = canvas.height = 400;aaa();function aaa() {var a, b, c...
HTML_3d绕环(2)
SDWESCES的博客
03-06 105
homework9 3d绕环(2) 3drh(2) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3d绕环2</title> <style type="text/css"> *{ padding: 0px; margin: 0px; } body{ background-color: bl
html5行星环绕,Two.js实现星球环绕动画效果
weixin_39977488的博客
06-30 700
Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合：SVG，Canvas 和 WebGL，旨在使平面形状和动画的创建更方便，更简洁。本文主要介绍了基于Two.js实现=星球环绕动画效果的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。Two.js 有一个内置的动画循环，可搭配其他动画库。Two.js 包...
html图片文字环绕
weixin_52831324的博客
12-01 1487
html图片文字环绕。
HTML5超炫3D旋转效果
09-11
html5的3D旋转效果
html5 canvas碎片3D环绕地球天体运动动画特效
06-11
在这个特定的案例中，“html5 canvas碎片3D环绕地球天体运动动画特效”是一个利用Canvas API实现的3D视觉效果，模拟了天体（如行星）在三维空间中围绕地球的运动轨迹。 首先，我们要理解Canvas的基本概念。...
CSS3星系轨道3D环绕旋转代码
06-12
【CSS3星系轨道3D环绕旋转代码】是一种利用CSS3的强大功能来创建动态视觉效果的技术。在这一项目中，开发者巧妙地运用了CSS3的`animation`、`transform`和`transition`属性，构建了一个模拟星系中星球环绕轨道3D旋转...
【HTML+JS+CSS】3D空间环绕旋转特效（源码+可理解的注释）-CSDN@追光者♂
10-01
大家好，这是近期通过前端技术实现的一个特效：3D空间环绕旋转。内容已经在博客中记录，近期会发布。本资源包含完整的可执行代码文件，并包含必要的注释，欢迎大家下载验证特效效果。另外，主页专栏“Python从入门到...
3D木马环绕效果
03-16
WebGL是HTML5的一项技术，它允许在浏览器中进行硬件加速的3D图形渲染，无需插件支持。通过调用OpenGL ES 2.0的API，WebGL可以在Web页面上呈现交互式的3D内容。在这个案例中，3D木马的旋转动画就是通过WebGL和Three....
html实现3D动态相册
最新发布
孤客科技
04-26 932
3D动态相册，给女朋友做一个！
通过transform，纯css写出3d环绕效果
c_qianxia5040的博客
06-10 1384
实现原理： transform: rotateY(60deg) translateZ(300px) 通过rotateY使元素围绕Y轴旋转，translateZ拉开Z轴的距离，更有立体感 本案例通过将圆分为6等分，各自转一圈，只是起点相差60度 效果： 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-
CSS3:3D环绕实现
weixin_30915275的博客
11-18 935
CSS3：3D环绕实现篇 废话不多说，直接给大家看效果：[不仅有背景，还有音乐] 大神请绕道：小白请继续往下看： 是不是心动了呢，心动不如行动：代码在手，天下我有，表白利器可不要错过了。 HTML,CSS代码都在下方，至于图片的话就不在这里粘贴了，把图片路径改成自己喜欢的就可以了。 源代码： <!DOCTYPE html><html lang="en"&...
HTML_注册信息表
SDWESCES的博客
01-20 1441
注册信息表 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册信息表</title> <!-- 作者：shidiwen 时间：2021-01-19 描述：注册信息表 --> </head> <body bgcolor="aliceblue">
写一段3d环绕效果的前端代码
05-27
以下是一个简单的3D环绕效果的前端代码示例： ```html <!DOCTYPE html> <html> <title>3D环绕效果 .container { width: 400px; height: 400px; position: relative; perspective: 1000px; } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值