css-transform

transform 2D变换

rotate旋转,只有一个参数

单位角度:deg

scale缩放

  • 一个参数:水平和垂直同时缩放 transform:scale(1.1)
  • 两个参数:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。 可以是负数,如果是负数则会图片翻转translate位移
  • 一个值表示X轴的位移,两个值表示X轴Y轴skew倾斜
  • 一个参数时:表示水平方向的倾斜角度;
  • 两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。 水平方向对应垂直方向的角,垂直方向对应方向的角 skew的默认原点transform-origin是这个物件的中心点

变换基点

transform-origin

  • 默认基点为中心点,可以通过关键词设置坐标值或关键词改变基点

perspective-origin景深基点 在什么方位去看

多方法组合变形

上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法,这里讲介绍综合使用这几个方法来对一个元素进行多重变形。

用法:transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

这四种变形方法顺序可以随意,但不同的顺序导致变形结果不同,原因是变形的顺序是从左到右依次进行,这个用法中的执行顺序为1.rotate 2.scalse 3.skew 4.translate 并且,每个变形之间用“空格”分隔符,而不是“,”

transform 3D变换

变换风格transform-style

  • flat:没有3D效果。不是默认值。这个值js改变值的时候用
  • preserve-3d:子元素将有3D的效果perspective景深,近大远小

景深给爷爷,风格给父亲

3D 属性

3D位移:CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数;

translate3d(tx,ty,tz)

其属性值取值说明如下:

tx:代表横向坐标位移向量的长度; ty:代表纵向坐标位移向量的长度; tz:代表Z轴位移向量的长度。此值不能是一个百分比值,如果取值为百分比值,将会认为无效值。

3D旋转:CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数;

scale3d(sx,sy,sz)

sx:横向缩放比例; sy:纵向缩放比例; sz:Z轴缩放比例;

3D缩放:CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数;

rotate3d(x,y,z,a)

x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值; y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值; z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值; a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。

下面介绍的三个旋转函数功能等同:

rotateX(a)函数功能等同于rotate3d(1,0,0,a) rotateY(a)函数功能等同于rotate3d(0,1,0,a) rotateZ(a)函数功能等同于rotate3d(0,0,1,a)

3D矩阵:CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS:10分钟搞定Flex布局

    Flexbox Layout(弹性盒子布局),是CSS3的一种新型布局模式,给很多CSS老大难问题提供了优雅的解决方案(例如:垂直居中

    WEBJ2EE
  • 我对"大前端"的偏见

    写这篇也是忐忐忑忑,一个后端聊前端的话题,总显得那么不专业,见识所限,仅供参考。此文的来由也是由前篇文章引申出来的,详见前端工程化的个人思考+前端工程化的个人思...

    歪脖贰点零
  • react核心api

    react从16年12月开始,已经学了有2年多了。react引导了作者找到了第一份比较专职的前端工作。react 2014年横空出世,以其革命性的写法,带动了前...

    一粒小麦
  • 前端工程化的个人思考

    在我的印象中,一提到软件工程,首先不会想到的是前端这一块,大概是因为以往工作偏向的缘故。这两年最大的感触就是前端发展的很快,时下的前端开发也远非从网络中抠一段j...

    歪脖贰点零
  • Vue:scoped与module的使用与利弊

    一个web应用是离不开html、css与js,其中css充斥的整个web项目中。css它有一个特定,它是全局的。这样的特性导致的结果是,一旦你在不同的地方定义了...

    Rouse
  • 【技巧】ionic3修改自定义图标

    我们需要把它裁切并转成svg格式再生成字体图标,比较繁琐,而我新系统目前也没有装相应软件,所以这里不采用这些图标,选用网上已有类似的字体图标来代替。

    IT晴天
  • React 组件化开发(一)

    写react和传统的js差不多。只是有一个设计思想贯穿了整个框架。用一个公式来表达就是:

    一粒小麦
  • Nginx实现跨域使用字体文件的配置方法

    本文主要给大家介绍了关于Nginx跨域使用字体文件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:

    习惯说一说
  • 基于react/vue生态的前端集成解决方案探索与总结

    本文主要总结了笔者在多年前端工作中的技术方案选型,结合各种不同类型的项目,搭建了一套完整的前端集成解决方案,主要包含如下内容:

    徐小夕
  • 【一起来烧脑】一步学会HTML体系

    HTML是用来描述网页的一种语言 叫超文本标记语言 HTML不是一种编程语言,而是一种标记语言 一套标记标签

    达达前端

扫码关注云+社区

领取腾讯云代金券