首页 > 编程源码 > HTML5的CSS3转3d技术

HTML5的CSS3转3d技术

楼主:萌二代223 [1级] · 2019-10-29 ·  浏览881 · 编程源码 · ID:
相信大多数进来的都是会点html,
那么会html就一定会css了,
做为html的样式,css不仅能添加动画,还能制作出3D效果。
css的转3d技术非常的冷门,大多数绚丽特效都是通过canvas拿js写的。
但是css转3d技术非常的简单,而且通俗易懂,只需要搭建一个3d场景,就可以通过平移旋转搭建一个简单的模型。
没事的时候写的一个我的世界僵尸模型
花了一个小时写的
顺便放到主页里了
主机用的彩虹云,特别好用。
演示地址:
http://xiaoerdal.cn/
转3d代码如下:
transform-style:preserve-3d;//设置为3d场景
transform:设置元素旋转、缩放、移动或倾斜。
translate(x,y) 定义 2D 转换。 测试
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。 测试
translateY(y) 定义转换,只是用 Y 轴的值。 测试
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。 测试
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。 测试
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 测试
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。 测试
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 测试
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 测试
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 测试
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 测试
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 测试
perspective(n) 为 3D 转换元素定义透视视图。
ok了解完手册内容我们就可以自己搭建一个模型。
- 版权声明 - 1、本帖所有言论和图片等纯属网友个人意见,与流星社区立场无关;
2、其他单位或个人使用、转载或引用本帖时必须同时征得该帖子作者萌二代223流星社区的同意;
3、备注原文地址:https://bbs.liuxingw.com/t/16451.html,可忽略第2条;
4、帖子作者需承担一切因本文发表而直接或间接导致的相关责任;
5、如本帖内容或部分内容转载自其它媒体,这并不代表本站赞同其观点和对其真实性负责;
6、如本帖若为资源类,将仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您安装或使用的设备中彻底删除上述内容;
7、如果您喜欢该程序,请支持正版软件,购买注册,可以得到更好的正版服务;
8、如本帖侵犯到任何版权或违法问题,请立即邮件告知我们,我们将及时予以处理。
9条回复 |  最后回复于2019-10-30

萌二代223 [1级]

纯css写的模型,不用一点js。
发布于2019-10-29

回复列表

  • 内容加载中...

说点什么...

[]

666,所以呢,源码呢
发布于2019-10-29

回复列表

  • 内容加载中...

说点什么...

爷来找茬 [1级]

源码
发布于2019-10-30

回复列表

  • 内容加载中...

说点什么...

萌二代223 [1级]

马上,我先放度盘里
发布于2019-10-30

回复列表

  • 内容加载中...

说点什么...

萌二代223 [1级]

想看哪个的
发布于2019-10-30

回复列表

  • 内容加载中...

说点什么...

[]

源码呢
发布于2019-10-30

回复列表

  • 内容加载中...

说点什么...

萌二代223 [1级]

马上
发布于2019-10-30

回复列表

  • 内容加载中...

说点什么...

萌二代223 [1级]

草方块模型源码最基础的,僵尸模型我要下班整理一下,晚上发。
 链接:https://pan.baidu.com/s/17I0Qkp8yyIpuC43TZR9-rA 提取码:9230
发布于2019-10-30

回复列表

  • 内容加载中...

说点什么...

萌二代223 [1级]

创建ul列表
创建6个li(6个面)
设置宽高
设置为绝对定位(可以不设置)
第一个li向前平移
第二个li向后平移
第三个y旋转90度向前平移
第四个y旋转90度向后平移
第五个x旋转90度向上平移
第六个x旋转90度向下平移
(平移位置是由宽高决定的,熟悉css3d坐标轴后想怎么转就怎么转不是固定旋转平移搭建)的
设置动画
将动画绑定在ul上
发布于2019-10-30

回复列表

  • 内容加载中...

说点什么...
登录注册 后才可进行评论
签到
45人签到
已签0天
  • 46632帖子
  • 1936742热点量
  • 184945火热值