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

fyh559需要积分:4(1积分=1元)

资源文件列表:

3D效果源码.zip 大约有29个文件
  1. 3D效果源码/
  2. 3D效果源码/01-3D球测试.html 2.79KB
  3. 3D效果源码/02-正方体测试.html 3.43KB
  4. 3D效果源码/03-贴图正方体.html 3.31KB
  5. 3D效果源码/04-夜光球体.html 3.11KB
  6. 3D效果源码/05-球体相册.html 1.21KB
  7. 3D效果源码/06-环绕球体.html 1.58KB
  8. 3D效果源码/css/
  9. 3D效果源码/css/05.css 2.35KB
  10. 3D效果源码/css/06.css 4.21KB
  11. 3D效果源码/images/
  12. 3D效果源码/images/01-a.png 662.36KB
  13. 3D效果源码/images/02-a.png 1.08MB
  14. 3D效果源码/images/03-a.png 117.45KB
  15. 3D效果源码/images/04-a.png 1.66MB
  16. 3D效果源码/images/05-a.png 658.98KB
  17. 3D效果源码/images/06-a.png 612.98KB
  18. 3D效果源码/images/07-a.png 633.91KB
  19. 3D效果源码/images/08-a.png 446.14KB
  20. 3D效果源码/images/09-a.png 468.38KB
  21. 3D效果源码/images/10-a.jpg 75.28KB
  22. 3D效果源码/images/11-a.png 1.76MB
  23. 3D效果源码/images/12-a.png 527.47KB
  24. 3D效果源码/images/am1.gif 1.51MB
  25. 3D效果源码/images/am2.gif 1.23MB
  26. 3D效果源码/images/am3.gif 1.36MB
  27. 3D效果源码/images/am4.gif 2MB
  28. 3D效果源码/images/am5.gif 386.35KB
  29. 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; /* transform: rotateX(-30deg) rotateY(-30deg); */ } .contain>div { width: 200px; height: 200px; transform-style: preserve-3d; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* transition: 2s; */ animation: run 4s linear infinite; } @keyframes run { 0% {} /* 50% { transform: rotate3d(1, 1, 1, 360deg) rotateX(360deg) rotateZ(360deg); transform: rotate3d(1, 1, 1, 360deg); } */ 100% { /* transform: rotate3d(1, 1, 1, 360deg) rotateX(360deg) rotateZ(360deg); */ /* transform: rotate3d(-1, -1, -1, -360deg); */ 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>
100+评论
captcha
    相关资源
    类型标题大小时间
    ZIPQT封装的弧形进度条组件4.46KB9月前
    ZIP在线拍卖系统2024(代码+论文+ppt)98.76KB9月前
    ZIPSTM32学习-IIC2.44KB9月前
    ZIP数据库原理实验一、实验1 认识DBMS二、实验2 简单SQL查询三、实验3 高级SQL查询四、实验4 数据的更新22.54MB9月前
    ZIP使用Quartus ii和Verilog语言构建一个32位CPU并实现FPGA单片机流水灯16.62MB9月前
    ZIPViT算法及其在轴承故障诊断工程领域应用34.07MB9月前
    ZIP文件切割V1.0.1.zip458.52KB9月前
    ZIPlibssh2库，内函编译好的32位和64位的动态库lib、dll，以及相关头文件242.4KB9月前