关于transform的3D变形函数
继续transform的3D用法:
translate3d(x,y,z)定义3D转换
transformX(x)只用x轴的值进行转换;
transformY(y)只用y轴的值进行转换:
transfornZ(z)只用z轴的值进行3d转换;
scale缩放
scale3d(x,y,z)定义3d的缩放
scaleX(x)在x轴方向的缩放
scaleY(y)在y轴方向进行缩放
scaleZ(z)定义在z轴的方向进行缩放
rotate旋转(deg角度)
rotate3d(x,y,z,angle)定义3d的旋转
rotateX(deg)定义x轴的旋转
rotateY(deg) 定义y轴的旋转
rotateZ(deg)定义Z轴的旋转
matrix3d( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义3d的转换,使用16个4乘4的矩形的值来定位。
transform-origin:作用和2d的一样,都是改变变形的起点 z轴是3d的特有表现
transform-style:规定被嵌套的元素如何在3d环境下显示:
flat表示不保留在子元素的3d空间
preserve-3d表示保留子元素的3d空间
perspective-origin:规定3D元素的底部位置;目前浏览器都不支持;
backface-visibility:定义元素在不面对屏幕时是否可见;浏览器支持度不好。
关于transform的3D变形函数的更多相关文章
- 3D变形旋转
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- css3 3D变形 入门(一)
css3 3D.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 ...
- [Swift通天遁地]九、拔剑吧-(15)搭建具有滑出、视差、3D变形等切换效果的引导页
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 9.css3动画-2D/3D变形--trasform
transform: None不转换. Translate(x,y)通过设置X轴的值进行移动. translateY(y)通过设置Y轴的值进行移动. Scale(x,y)定义2D缩放. ScaleX( ...
- CSS3——2D变形和3D变形
2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...
- Html CSS transform matrix3d 3D转场特效
Html CSS transform matrix3d 3D转场特效 透视矩阵 2n/(r-l) 0 (r+l)/(r-l) 0 0 2n/(t-b) (t+b)/(t-b) 0 0 0 (n+f)/ ...
- deep_learning_Function_ Matplotlib 3D 绘图函数 plot_surface 的 rstride 和 cstride 参数
今晚开始接触 Matplotlib 的 3D 绘图函数 plot_surface,真的非常强大,图片质量可以达到出版级别,而且 3D 图像可以旋转 ,可以从不同角度来看某个 3D 立体图,但是我发现各 ...
- transform做2d和3d变形(css动画一)
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 有段时间我是没理清transform.translate.transition和animation之间的关 ...
- css3中变形函数(同样是对元素来说的)和元素通过改变自身属性达到动画效果
/*对元素进行改变(移动.变形.伸缩.扭曲)*/ .wrapper{ margin:100px 100px auto auto; width:300px; height:200px; border:2 ...
随机推荐
- SpringBoot入门Demo
前言:相信做java后台编程的童鞋都知道Spring家族,Spring作为我们项目中必备的框架.JavaSpringBoot号称javaEE的颠覆者,这引起了本Y的好奇,这才花费了一点时间,学习了下s ...
- php 下载保存文件保存到本地的两种实现方法
这里的下载,指的是 弹出下载提示框. 第一种: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?php function downfile() { $filename ...
- PH日期格式化
%M 月名字(January--December) %W 星期名字(Sunday--Saturday) %D 有英语前缀的月份的日期(1st, 2nd, 3rd, 等等.) %Y 年, 数字, 4 位 ...
- 重磅发布:《阿里巴巴Android开发手册(规约)》
1.前言 阿里巴巴于近日为广大程序员再送上重磅开春好礼:<阿里巴巴Android开发手册(规约)>.该开发规范在阿里内部经过了长期的修缮,现已总结成册,向所有移动开发者.技术爱好者开放,希 ...
- es2015及es2017对我们的编程方式造成了什么影响?
记一些写代码中用得到的es6+语法,至于什么正则的拓展,数组的什么fill方法,对我们来说用处不大,就不提及了. 还有es6的import模块和class模块,这些在各种框架中都有体现,而且语法简单, ...
- PHP的性能优化方法总结
什么情况之下,会遇到PHP性能问题? 1:PHP语法使用不恰当. 2:使用PHP语言做了它不擅长的事情. 3:使用PHP语言连接的服务不给力. 4:PHP自身的短板(PHP自身做不了的事情). 5:我 ...
- 老男孩Python全栈开发(92天全)视频教程 自学笔记08
day8课程内容: 文件操作 f=open('小重山','r',encoding='utf8') #以读的方式打开文件 data=f.read() print(data) f.close() # ...
- 危化品速查APP--Android Project
开发环境 Android studio 2.3.1 功能描述 集成多种查询方式,查看本地数据库中危险化学品的信息: 按照中文拼音和英文首字母,对化学品进行查询: 按照UN号或者CAS号查询相应的化学品 ...
- SDL 2.0 如何在 windows 上使用?
https://wiki.libsdl.org/APIByCategory http://adolfans.github.io/sdltutorialcn/sdl-2-dot-0-tutorial-i ...
- HDU - 2612 bfs [kuangbin带你飞]专题一
分别以两个人的家作为起点,bfs求得到每个KFC最短距离.然后枚举每个KFC,求得时间之和的最小值即可. 此题不符合实际情况之处: 通过了一个KFC再去另一个KFC可以吗? 出题人都没好好想过吗? ...