关于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 ...
随机推荐
- Quartz.NET 3.0 正式发布
Quartz.NET是一个强大.开源.轻量的作业调度框架,你能够用它来为执行一个作业而创建简单的或复杂的作业调度.它有很多特征,如:数据库支持,集群,插件,支持cron-like表达式等等.在2017 ...
- Maven编译问题
Maven构建的Project默认使用JDK1.5进行编译,要想使用JDK1.8进行编译,最好在项目的POM文件中加上以下的字段. <build> <plugins> < ...
- window.location的路径
1 相对路径 window.location.href='add_affiche.php'; 或 window.location.href='./add_affiche.php'; 2 绝对路径 wi ...
- IOS开发之记录用户登陆状态,ios开发用户登陆
IOS开发之记录用户登陆状态,ios开发用户登陆 上一篇博客中提到了用CoreData来进行数据的持久化,CoreData的配置和使用步骤还是挺复杂的.但熟悉CoreData的使用流程后,CoreDa ...
- c中const定义的问题
/* 这题有个疑问: const double BASE1=BREAK1*RATE1; //第二个分界点前总共要缴的税收 const double BASE2=BASE1+(BREAK2-BREAK1 ...
- java1 - 环境与简介
一.阅读 JAVA历史 回答以下问题: JDK 是什么? JRE 是什么? java 有那三大平台? java 开发工具有那些? java 可以在那些系统上面做开发? java 工程师可以做什么? 二 ...
- Java集合框架(五)—— Map、HashMap、Hashtable、Properties、SortedMap、TreeMap、WeakHashMap、IdentityHashMap、EnumMap
Map Map用于保存具有映射关系的数据,因此Map集合里保存着两组值,一组值用于保存Map里的key,另一组值用于保存Map里的value,key和value都可以是任何引用类型的数据.Map的ke ...
- aforge 学习-命名空间中文理解
序列 名称 介绍 1 Aforge AForge AForge名称空间的核心名称空间.微软网络框架,其中包含核心类所使用的其他框架的命名空间和类,可以独立用于各种用途. 2 AForge.Cont ...
- Node.js,commonjs,require
环境: Node应用由模块组成,采用CommonJS模块规范. node的全局对象是global,没有window这个对象. process表示当前执行的进程,挂在global之下. CommonJS ...
- java:产生小数位数为2的随机概率,使得和为1
public static List<InstSec> setDataSec(List<String> instno) { List<InstSec> result ...