transform的2D和3D变换
2024-09-06 05:11:43
transform取值
none:默认值,即是无转换
matrix(,,,,,):
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵translate([, ]):
指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0translateX():
指定对象X轴(水平方向)的平移translateY():
指定对象Y轴(垂直方向)的平移rotate():
指定对象的2D rotation(2D旋转),需先有transform-origin属性的定义scale([, ]):
指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值scaleX():
指定对象X轴的(水平方向)缩放scaleY():
指定对象Y轴的(垂直方向)缩放skew( [, ]):
指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0skewX():
指定对象X轴的(水平方向)扭曲skewY():
指定对象Y轴的(垂直方向)扭曲
transform-origin属性
定义:transform-origin 属性允许您改变被转换元素的位置(即是参考点),
需要了解的是,在transform中的存在的坐标系为,X轴向右,Y轴向下,Z轴朝向屏幕方向
取值:
- 默认值:50% 50% 0 ,基点即是2D所在图形的几何中心,在3D中即是绕着z轴旋转
- 取百分值%,依据坐标轴位置取百分值
- length,依据坐标轴的位置取距离值
- translate取值不受该属性的影响
- 取方向值,left,right,top,bottom
- center(即是center center或50% 50%)
- top(即是top center或50% 0)
- right(即是right center或100% 50%)
- bottom(即是bottom center或50% 100%)
- left(即是left center或0 50%)
- top left(即是0% 0%)
- top right(即是100% 0%)
- bottom left(即是0% 100%)
- bottom right(即是100% 100%)
transform3D
- transform3D,是在translate2D的基础上增加z轴方向上的维度,再通过增加某些3D属性,营造出3D的感觉
- rotate3D,默认情况下rotate的旋转中心是绕着z轴转动的转动方向依据顺正逆负,rotate( deg)=rotatez( deg),rotatex( deg)即是绕x轴由外往内旋转,rotatey( deg)即是绕y轴反向翻书方向旋转
- transform:rotate3D(1,1,1,360deg);即是绕着三维空间的正方向距离起始位置较近的地方旋转
- transform:translatez(100px) 对于x/y轴平移可以使用占用自身尺寸的百分比,z轴则只能使用length
- perspective景深即是我们眼睛注视屏幕的距离,它的作用是搭建舞台。它是一个不可继承的属性,但它可以作用于所有的后代元素。景深越大,灭点(随视角逐渐消失的点)越远,变形越小;景深越小,灭点越近,变形越大
- transform-style的作用亦是搭建舞台,使3D舞台有层次感,该属性值仅作用于父元素
最新文章
- Pocscan搭建详解
- Git服务器搭建及配置
- Android应用开发-Activity(重制版)
- python基础知识9——模块2——常见内置模块
- SQL server 2005中的锁(1)
- 生成格式化的json
- 新安装个Myeclipse,导入以前做的程序后程序里好多错,提示The import java.util cannot be resolved
- JDBC编程步骤
- SQL把做个字段组合成一个字符串
- JS判断设备终端(PC,iPad,iPhone,android,winPhone)和浏览器
- 物理卷操作命令:pvcreate,pvscan,pvdisplay.卷组操作命令:vgcreate,vgdisplay.
- tomcat配置https方法
- Suneast &; Daxia (规律)
- 【JavaScript】封装实用方法【持续积累】
- vue实现一个简易Popover组件
- Dubbo和Spring Cloud微服务架构对比
- .net中文分词 jieba.NET
- 回溯算法_ BackTracking
- 压测工具之JMeter之环境配置及运行
- Java 缓存技术之 ehcache