transform取值

none:默认值,即是无转换

matrix(,,,,,):

以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵

translate([, ]):

指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

translateX():

指定对象X轴(水平方向)的平移

translateY():

指定对象Y轴(垂直方向)的平移

rotate():

指定对象的2D rotation(2D旋转),需先有transform-origin属性的定义

scale([, ]):

指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值

scaleX():

指定对象X轴的(水平方向)缩放

scaleY():

指定对象Y轴的(垂直方向)缩放

skew( [, ]):

指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

skewX():

指定对象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舞台有层次感,该属性值仅作用于父元素

transform的2D和3D变换的更多相关文章

  1. transform做2d和3d变形(css动画一)

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 有段时间我是没理清transform.translate.transition和animation之间的关 ...

  2. 关于transform的2D

    在transform的学习中,自己总结了一点经验. 我们知道transform有2D和3D的两大类变换,这里分享下关于2D的属性简单示例: 一.2D变换:  (x为水平,y为垂直) 1.skew(斜拉 ...

  3. (一一九)通过CALayer实现阴影、圆角、边框和3D变换

    在每个View上都有一个CALayer作为父图层,View的内容作为子层显示,通过layer的contents属性决定了要显示的内容,通过修改过layer的一些属性可以实现一些华丽的效果. [阴影和圆 ...

  4. 基本3D变换之World Transform, View Transform and Projection Transform

    作者:i_dovelemon 来源:CSDN 日期:2014 / 9 / 28 主题:World Transform, View Transform , Projection Transform 引言 ...

  5. opengl中场景变换|2D与3D互转换(转)

    opengl中场景变换|2D与3D互转换 我们生活在一个三维的世界——如果要观察一个物体,我们可以: 1.从不同的位置去观察它.(视图变换) 2.移动或者旋转它,当然了,如果它只是计算机里面的物体,我 ...

  6. css3的transform ,2D变换

    transformtransform的中文翻译就是变换,改变,改观,转换的意思 在css中的主要作用就是对一个div或元素进行样式的改变. 他的属性(变换方式)有:平移,旋转,缩放,扭曲transla ...

  7. CSS3动画与2D、3D转换

    一.过度动画:transition 五个属性: transition-property css 样式属性名称 transition-duration 动画持续时间(需要单位s) transition- ...

  8. transform的2D部分,嗯…就这个标题了。

    上一次写了transition的内容,这次就写拼写很类似的另外一个属性transform好了……我英语差这件事就不要吐槽了,下面是正文,真的: transition是过渡,transform是变换. ...

  9. css3的2D和3D的转换

    一:2D转换: 通过 CSS3  transform转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移 ...

随机推荐

  1. 利用transformer进行中文文本分类(数据集是复旦中文语料)

    利用TfidfVectorizer进行中文文本分类(数据集是复旦中文语料) 利用RNN进行中文文本分类(数据集是复旦中文语料) 利用CNN进行中文文本分类(数据集是复旦中文语料) 和之前介绍的不同,重 ...

  2. SpringApplication.run(xxx.class, args)背后的东东——整体脉络

    从spring到springmvc,再到springboot.springcloud,应用程序api开发调用方面都已经非常熟悉,但对spring背后的扩展机制:为何一个简单的main方法可以实现这么强 ...

  3. httpx和requests之间有什么区别?

    requests只能发送同步请求,httpx能够发送同步和异步请求. httpx的api和requests是兼容的,切换的成本几乎是零.在异步模式下,测试大量接口的话,httpx的速度是能够显著得到提 ...

  4. plc模拟量采集模块的作用

    在工业控制中,某些输入量(如压力.温度.流量.转速等)是连续变化的模拟量,某些执行机构(如伺服电动机.调节阀.记录仪等)要求PLC输出模拟信号,而PLC的CPU只能处理数字量.模拟量首先被传感器和变送 ...

  5. Java学习的第二十天

    1.类是单继承的,类是多继承的.. 接口只能继承接口 标识接口没有任何的属性和方法 2.今天没有问题 3.明天学习综合实例和第八章开头部分

  6. SYL数据库表关系图 AND 项目架构图

    关系图(内容按照具体项目要求可以改) 项目架构图

  7. 【Luogu】P1306 斐波那契公约数 题解

    原题链接 嗯...很多人应该是冲着这个标题来的 (斐波那契的魅力) 1.分析题面 点开题目,浏览一遍题目,嗯?这么简单?还是蓝题? 再看看数据范围,感受出题人深深的好意... \(n,m \leq 1 ...

  8. Java_数组, 懒得整理了 ---------------------> 未完, 待续

    待续 public class TestArray { public static void main(String[] args) { String[] s1 = {"双儿", ...

  9. Canvas鼠标点击特效(富强、民主...)、收藏

    <script> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").cl ...

  10. 3.4 spring5源码系列--循环依赖的设计思想

    前面已经写了关于三篇循环依赖的文章, 这是一个总结篇 第一篇: 3.1 spring5源码系列--循环依赖 之 手写代码模拟spring循环依赖 第二篇: 3.2spring源码系列----循环依赖源 ...