下载资源前端资源详情
3D效果源码.zip
大小:17.57MB
价格:19积分
下载量:0
评分:
5.0
上传者:fyh559
更新日期:2025-09-22

HTML+CSS实现快速3D效果，六个案例源码分享 3D球体、正方体+鼠标渐入渐出效果、贴图正方体、球体相册、行星环绕相册

资源文件列表(大概)

文件名
大小
3D效果源码/
-
3D效果源码/01-3D球测试.html
2.79KB
3D效果源码/02-正方体测试.html
3.43KB
3D效果源码/03-贴图正方体.html
3.31KB
3D效果源码/04-夜光球体.html
3.11KB
3D效果源码/05-球体相册.html
1.21KB
3D效果源码/06-环绕球体.html
1.58KB
3D效果源码/css/
-
3D效果源码/css/05.css
2.35KB
3D效果源码/css/06.css
4.21KB
3D效果源码/images/
-
3D效果源码/images/01-a.png
662.36KB
3D效果源码/images/02-a.png
1.08MB
3D效果源码/images/03-a.png
117.45KB
3D效果源码/images/04-a.png
1.66MB
3D效果源码/images/05-a.png
658.98KB
3D效果源码/images/06-a.png
612.98KB
3D效果源码/images/07-a.png
633.91KB
3D效果源码/images/08-a.png
446.14KB
3D效果源码/images/09-a.png
468.38KB
3D效果源码/images/10-a.jpg
75.28KB
3D效果源码/images/11-a.png
1.76MB
3D效果源码/images/12-a.png
527.47KB
3D效果源码/images/am1.gif
1.51MB
3D效果源码/images/am2.gif
1.23MB
3D效果源码/images/am3.gif
1.36MB
3D效果源码/images/am4.gif
2MB
3D效果源码/images/am5.gif
386.35KB
3D效果源码/images/am6.gif
2.6MB

资源内容介绍

【HTML+CSS】实现快速3D效果，六个案例源码分享。3D球体、正方体+鼠标渐入渐出效果、贴图正方体、球体相册、行星环绕相册。使用于刚开始学习前端的人群，在不使用js的前提下就实现3D效果。代码简洁易懂，初级开发者利器。源码是开源的，任何人都可以借鉴。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { background: black; } .contain { margin: 100px auto; width: 800px; height: 600px; position: relative; perspective: 1000px; transform-style: preserve-3d; } .contain>div { width: 200px; height: 200px; transform-style: preserve-3d; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; animation: run 4s linear infinite; } @keyframes run { 0% {} 100% { transform: rotate3d(1, -1, 1, 360deg); } } .contain:hover>div { animation-play-state: paused; } .box { width: 200px; height: 200px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; text-align: center; line-height: 200px; border-radius: 30px; } .box>h1 { font-size: 160px; opacity: .8; color: white; } .bg1 { background: rgba(53, 63, 19, .6); transform: rotateX(-90deg) translateZ(100px); } .bg2 { background: rgba(31, 149, 173, .6); transform: rotateX(90deg) translateZ(100px); } .bg3 { background: rgba(248, 90, 198, .6); transform: rotateY(270deg) translateZ(100px); } .bg4 { background: rgba(212, 217, 175, .6); transform: rotateY(180deg) translateZ(100px); } .bg5 { background: rgba(233, 133, 133, .6); transform: rotateY(90deg) translateZ(100px); } .bg6 { background: rgba(172, 224, 49, .6); transform: rotateY(0deg) translateZ(100px); } </style></head><body> <div class="contain"> <div> <div class="box bg1"> <h1>1</h1> </div> <div class="box bg2"> <h1>2</h1> </div> <div class="box bg3"> <h1>3</h1> </div> <div class="box bg4"> <h1>4</h1> </div> <div class="box bg5"> <h1>5</h1> </div> <div class="box bg6"> <h1>6</h1> </div> </div> </div></body></html>

用户评论 (0)

发表评论

captcha

相关资源

QT封装的弧形进度条组件

在可视化应用中，弧形进度条应用也比较广泛，本示例封装了一个可复用、个性化的弧形进度条组件。示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

4.46KB24积分

在线拍卖系统2024(代码+论文+ppt)

CSDN展示地址:http://t.csdnimg.cn/28rdv

98.76KB44积分

STM32学习-IIC

STM32学习-IIC

2.44KB49积分

数据库原理实验一、实验1 认识DBMS二、实验2 简单SQL查询三、实验3 高级SQL查询四、实验4 数据的更新

一、实验1 认识DBMS二、实验2 简单SQL查询三、实验3 高级SQL查询四、实验4 数据的更新五、实验总结

22.54MB49积分