CSS 3D球形旋转

server/2024/11/25 17:22:59/

css+html即可实现3D球形旋转效果你敢信?你可以信!废话不多说,直接上代码!

<html>
<head>
</head>
<body>
<div id="box-preserve-3d"><div class="ball-center-x"></div><div class="ball-center-x-one"></div><div class="ball-center-x-two"></div><div class="ball-center-x-three"></div><div class="ball-center-x-four"></div><div class="ball-center-x-five"></div><div class="ball-center-y"></div><div class="ball-center-y-one"></div><div class="ball-center-y-two"></div><div class="ball-center-y-three"></div><div class="ball-center-y-four"></div><div class="ball-center-y-five"></div><div id="top">系</div><div id="bottom">统</div><div id="left">用</div><div id="right">迎</div><div id="front">欢</div><div id="back">使</div>
</div>
<style>body{background:#000;}#box-perspective{width: 100px;height: 100px;margin: auto;margin-top: 50px;perspective: 800px;perspective-origin: 50% 50%;}#box-preserve-3d {position: absolute;width: 100px;height: 100px;transform-style: preserve-3d;margin: 20%;}#box-preserve-3d div {position: absolute;width: 100px;height: 100px;text-align: center;line-height: 100px;}.ball-center-x{border:1px solid red;border-radius: 100px;width: 200px;height: 200px;transform: rotateY(-90deg);transform-origin: 50% 50%;}.ball-center-x-one{border:1px solid green;border-radius: 100px;width: 200px;height: 200px;transform: rotateY(0deg);transform-origin: 50% 50%;}.ball-center-x-two{border:1px solid blue;border-radius: 100px;width: 200px;height: 200px;transform: rotateY(30deg);transform-origin: 50% 50%;}.ball-center-x-three{border:1px solid yellow;border-radius: 100px;width: 200px;height: 200px;transform: rotateY(60deg);transform-origin: 50% 50%;}.ball-center-x-four{border:1px solid yellow;border-radius: 100px;width: 200px;height: 200px;transform: rotateY(120deg);transform-origin: 50% 50%;}.ball-center-x-five{border:1px solid yellow;border-radius: 100px;width: 200px;height: 200px;transform: rotateY(150deg);transform-origin: 50% 50%;}.ball-center-y{border:1px solid pink;border-radius: 100px;width: 200px;height: 200px;transform: rotateX(90deg);transform-origin: 50% 50%;}.ball-center-y-one{border:1px solid purple;border-radius: 100px;width: 200px;height: 200px;transform: rotateX(0deg);transform-origin: 50% 50%;}.ball-center-y-two{border:1px solid cyan;border-radius: 100px;width: 200px;height: 200px;transform: rotateX(30deg);transform-origin: 50% 50%;}.ball-center-y-three{border:1px solid orange;border-radius: 100px;width: 200px;height: 200px;transform: rotateX(60deg);transform-origin: 50% 50%;}.ball-center-y-four{border:1px solid orange;border-radius: 100px;width: 200px;height: 200px;transform: rotateX(120deg);transform-origin: 50% 50%;}.ball-center-y-five{border:1px solid orange;border-radius: 100px;width: 200px;height: 200px;transform: rotateX(150deg);transform-origin: 50% 50%;}#box-perspective{width: 100px;height: 100px;margin-left: 260px;margin-top: 222px;perspective: 800px;perspective-origin: 50% 50%;}#box-preserve-3d {position: absolute;width: 100px;height: 100px;transform-style: preserve-3d;}#box-preserve-3d div {position: absolute;width: 100px;height: 100px;text-align: center;line-height: 100px;color: white;font-size: 26px;}#top{/*background-image: url('../images/top.png');*/background-size: 100px;background: red;transform: rotateX(90deg) translateZ(100px);transform-origin: 50% 50%;}#bottom{/*background-image: url('../images/top.png');*/background-size: 100px;background: red;transform: rotateX(-90deg) translateZ(100px);transform-origin: 50% 50%;}#left{/*background-image: url('../images/left.png');*/background-size: 100px;background: red;transform: rotateY(90deg) translateZ(100px);transform-origin: 50% 50%;}#right{/*background-image: url('../images/left.png');*/background-size: 100px;background: red;transform: rotateY(-90deg) translateZ(100px);transform-origin: 50% 50%;}#front{/*background-image: url('../images/front.png');*/background-size: 100px;background: red;transform: translateZ(100px);transform-origin: 50% 50%;}#back{/*background-image: url('../images/front.png');*/background-size: 100px;background: red;transform: translateZ(-100px) rotateY(-180deg);transform-origin: 50% 50%;}@keyframes turn3d {0% { transform: rotateY(0) rotateX(0deg); }100% { transform: rotateY(360deg) rotateX(360deg); }}#box-preserve-3d {animation: turn3d 10s infinite linear;}.loginbox{position: fixed;width: 455px;top: 15%;right: 25%;}.loginbox>div{background-color: white;border-radius: 4px;box-shadow: 5px 5px 20px #4444;padding: 20px;}
</style>
</body>
</html>

 


http://www.ppmy.cn/server/144852.html

相关文章

3349、检测相邻递增子数组 Ⅰ

3349、[简单] 检测相邻递增子数组 Ⅰ 1、题目描述 给你一个由 n 个整数组成的数组 nums 和一个整数 k&#xff0c;请你确定是否存在 两个 相邻 且长度为 k 的 严格递增 子数组。具体来说&#xff0c;需要检查是否存在从下标 a 和 b (a < b) 开始的 两个 子数组&#xff0c…

FIber + webWorker

文章目录 Fiber主要功能解决的问题如何解决 webworker 多线程作用使用注意点使用1 主线程3 Worker 加载脚本4 错误处理5 关闭 Worker 数据通信 Fiber 主要功能 为每个增加了优先级&#xff0c;优先级高的任务可以中断低优先级的任务。然后再重新执行优先级低的任务增加了异步…

TCP为什么需要三次握手?两次握手或四次握手可以吗?

&#xff08;1&#xff09;三次握手可以保证双方具有接收和发送的能力 第一次握手服务端可以确认客户端的发送能力和服务端的接收能力是正常的&#xff1b;第二次握手客户端可以确认客户端和服务端的收发能力是正常的&#xff0c;但是服务端无法确认客户端的接收能力是正常的&…

使用php和Xunsearch提升音乐网站的歌曲搜索效果

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 5 IDEA必装的插件&…

FastAPI和SQLModel结合的优点

FastAPI和SQLModel的结合为现代Web应用开发带来了一系列显著的优势&#xff0c;特别适合需要与SQL数据库交互的场景。以下是它们结合的一些主要优点&#xff1a; 简短的代码&#xff1a;SQLModel通过使用Python类型注解来定义数据模型&#xff0c;最小化代码重复&#xff0c;无…

原生微信小程序在顶部胶囊左侧水平设置自定义导航兼容各种手机模型

无论是在什么手机机型下&#xff0c;自定义的导航都和右侧的胶囊水平一条线上。如图下 以上图iphone12&#xff0c;13PRo 以上图是没有带黑色扇帘的机型 以下是调试器看的wxml的代码展示 注意&#xff1a;红色阔里的是自定义导航&#xff08;或者其他的logo啊&#xff0c;返回之…

wpf处理C1FlexGrid 表格合计统计项处理,新增和查询都要生效

控件的两个事件都需要调用这个方法&#xff0c;新增的时候不写CellEditEnded&#xff0c;不然不会生效 ItemsSourceChanged"DetailGrid_ItemsSourceChanged" CellEditEnded"DetailGrid_ItemsSourceChanged" /// <summary> /// 列表1合计 …

蓝桥杯疑似例题解答方案(打印任意阶杨辉三角)

题目&#xff1a;输入n&#xff0c;打印n阶的杨辉三角 杨辉三角是一种特殊的由数字构成的三角形&#xff0c;边缘上的数字都是1&#xff0c;内部的数字则是左上角和右上角数字的加和。它本质上其实是二项展开的系数序列&#xff08;我们通过这个性质可以给出一种与本篇文章的方…