【前端素材】模板-实用20种3D素材渲染效果.zip_canvas实现的动态3D旋转球体资源-CSDN文库

共27个文件

html：10个

htm：10个

js：6个

版权申诉

HTML

前端动画

svg

canvas

166 浏览量 2024-04-04 18:35:52 上传评论收藏 71KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

【前端素材】模板-实用20种3D素材渲染效果.zip （27个子文件）

3d效果

3d卡片.htm 10KB

147.3d楼梯.htm 3KB

150.3d魔方-文章.htm 4KB

147.3d楼梯多个.htm 7KB

css-doodle

2.html 828B

1.html 557B

3d dot.html 2KB

jquery.svg3dtagcloud.min.js 6KB

tags.js 4KB

tagcloud.js 11KB

tag1.js 3KB

script.js 4KB

翻页1.html 10KB

147.3d楼梯3-详述.htm 4KB

3d卡片2.htm 6KB

147.3d楼梯多个2.htm 8KB

盒子.html 1KB

147.3d楼梯 1.htm 5KB

翻页.html 11KB

index.html 3KB

3d球体

box-shadow球体.htm 3KB

气泡.html 5KB

球体.html 4KB

球体自转.html 5KB

149.卡片边框渐变动画.htm 3KB

common.css 4KB

less.1.7.3.js 117KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> * { padding: 0; margin: 0; } body, html { height: 100%; } body { /*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。*/ -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px; background-color: #212121; font-family: '微软雅黑'; } .book { position: absolute; top: 50%; left: 50%; margin-top: -300px; width: 400px; height: 550px; background-color: #fff; -webkit-transform: rotateX(30deg); -ms-transform: rotateX(30deg); -o-transform: rotateX(30deg); transform: rotateX(30deg); } .preserve-3d { /*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内, 还是在该元素所在的平面内被扁平化。*/ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; /*规定如何在 3D 空间中呈现被嵌套的元素*/ transform-style: preserve-3d; } .book-page { position: absolute; top: 0; left: 0; width: 400px; height: 550px; /*设置四个边框的样式*/ border: 1px solid papayawhip; text-align: center; } .book-page-box { -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; /*设置旋转元素的基点位置*/ transform-origin: 0 50%; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); /*旋转DIV元素*/ transform: rotateY(0deg); } @keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } /* Firefox */ @-moz-keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } /* Safari and Chrome */ @-webkit-keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } /* Opera */ @-o-keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes flipBook2 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-150deg); -ms-transform: rotateY(-150deg); -o-transform: rotateY(-150deg); transform: rotateY(-150deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } /* Firefox */ @-moz-keyframes flipBook2 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-150deg); -ms-transform: rotateY(-150deg); -o-transform: rotateY(-150deg); transform: rotateY(-150deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } /* Safari and Chrome */ @-webkit-keyframes flipBook2 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-150deg); -ms-transform: rotateY(-150deg); -o-transform: rotateY(-150deg); transform: rotateY(-150deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } /* Opera */ @-o-keyframes flipBook2 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-150deg); -ms-transform: rotateY(-150deg); -o-transform: rotateY(-150deg); transform: rotateY(-150deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes flipBook3 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-140deg); -ms-transform: rotateY(-140deg); -o-transform: rotateY(-140deg); transform: rotateY(-140deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } /* Firefox */ @-moz-keyframes flipBook3 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-140deg); -ms-transform: rotateY(-140deg); -o-transform: rotateY(-140deg); transform: rotateY(-140deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } /* Safari and Chrome */ @-webkit-keyframes flipBook3 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-140deg); -ms-transform: rotateY(-140deg); -o-transform: rotateY(-140deg); transform: rotateY(-140deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } /* Opera */ @-o-keyframes flipBook3 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(-140deg); -ms-transform: rotateY(-140deg); -o-transform: rotateY(-140deg); transform: rotateY(-140deg); } 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotat

评论收藏

内容反馈

版权申诉