专栏首页前端说吧css笔记 - transform学习笔记(二)

css笔记 - transform学习笔记(二)

transform转换

CSS transform

属于2D/3D上的转换、变形效果。他不是一个动画,他就是变形。比如正方形变平行四边形,再变圆形。都是形状变成另一个形状。

但是如果配合上transition/animation,他就会从一个形状变成另一形状。只要有一段时间内的过渡效果,就形成了动画。

主要功能有:拉伸变形、倾斜、位移、缩放、旋转。

原理是:改变元素的尺寸、形状、角度、位置等

js写法:

  object.style.transform="rotate(7deg)";

transform-origin 设置元素的基点位置

该元素允许改变被转换元素的位置

默认不设置的情况下,x轴坐标是(border-width + padding + width) / 2 + 'px',第二个坐标是(border-width + padding +height) / 2 + 'px';

transform-style 被嵌套元素在3D空间如何显示

  • 规定被嵌套元素如何在3D空间中显示:
    • flat:表示子元素不保留3d位置、
    • preserve-3d表示 子元素保留3d位置
  • 属性值: flat、preserve-3d、unset、inherit、initial
  • 需要与transform一同使用。

transform的各个方法属性

name

含义

none

我不定义好不好

translate()

位移

rotate()

旋转

scale()

缩放

skew()

拉伸变形

matrix()

混合, 集百家之大乘。

方法可能的配置

skew:翻转给定的角度,xdeg水平翻转度数,ydeg垂直翻转度数。能为负

D

name

含义

中心点

备注

2

skew(xdeg,ydeg)

拉伸变形

默认中心点就是盒模型的中心点

2

skewX(xdeg)

水平方向拉伸变形

同上

2

skewY(ydeg)

垂直方向拉伸变形

同上

2

skew(n-deg)

延伸,只写一个也起作用,不过是只默认作用于x轴水平拉伸。

同上

* 可以为负值,负值时翻转拉伸的方向,比如之前是左上角-右下角拉伸,翻转后变成右上角-左下角的拉伸。

scale:x对应宽度,y对应高度,缩放到原来宽高的倍数。

D

name

含义

中心点

备注

2

scale(x,y)

缩放

默认中心点就是盒模型的中心点

2

scale(n-deg)

缩放

默认中心点就是盒模型的中心点

和上边的区别就是默认只缩放水平方向,就像scaleX(x)

3D

scale3d(x,y,z)

缩放

同上

我设置三个点和设置正常的两个点没什么区别

2

scaleX(x)

横向缩放

同上

正值时横向拉伸,同skew的区别是:水平拉伸不带斜线角度

2

scaleY(y)

纵向缩放

同上

正值时竖向拉伸,同skew的区别是:垂直拉伸不带斜线角度

3D

scaleZ(z)

纵深方向缩放

同上

2d图形设置没有多大的区别,不过可以看到文字微妙的变化

首先,缩放的倍数就是数字的实际倍数,比如写2就是放大两倍。再者,当数值是大于0的值时,就是放大。当数值在0-1之间的时候,就是缩小。所以 放大还是缩小看的是数值的关系,和正负没有关系。

数值为0就是原来的宽高*0时就看不见了。

数值为1是放大,但是是宽高*1,和没乘一样。还和原来一边大。

另外,计算时不光是乘宽高,内边距padding、边框宽度border-width、甚至外边距margin都跟着升天乘了相应倍数

rotate:N°旋转,正值顺时针旋转,负值逆时针旋转。

D

name

含义

中心点

备注

2

rotate(angle)

旋转

默认中心点就是盒模型的中心点

angle值

3D

rotate3d(x,y,z,angle)

N°旋转

同上

3D

rotateX(angle)

N°旋转

同上

围绕x轴做水平方向翻转

3D

rotateY(angle)

N°旋转

同上

围绕y轴做垂直方向翻转

3D

rotateZ(angle)

N°旋转

同上

translate(x,y):相对于当前位置向水平(x)/垂直(y)方向移动,正值向右/下,负值向左/上

D

name

含义

中心点

备注

2

translate(x,y)

2d两点位移

默认中心点就是盒模型的中心点

3D

translate3d(x,y,z)

3d三点位移

同上

2

translateX(x)

只是用 X 轴的值位移

同上

2

translateY(y)

只是用 Y 轴的值位移

同上

3D

translateZ(z)

只是用 Z 轴的值位移

同上

括号里边, 数值后边一定要有单位值 ,如果没有单位值不起作用

translate执行的位移,对于周围的元素不产生任何影响。就像relative的效果。

matrix(n,n,n,n,n,n)

D

name

含义

中心点

备注

2

matrix(n,n,n,n,n,n)

矩阵,模型

默认中心点就是盒模型的中心点

6个值的矩阵

3D

matrix(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

矩阵,模型

同上

16个值,4x4矩阵

perspective 规定3D元素的透视效果

张鑫旭讲解文章

perspective(n) 为3D转换元素设置透视视图

  • 规定3D元素的透视效果
  • 目前浏览器都不支持,只有safari和chrome用替代元素-webkit-perspective
  • 只影响有3d转换属性的子元素,是加在父元素身上的。
  • 需要配合perspective-origin一同使用。

perspective-origin 规定3D元素的底部位置

  • 规定3D元素的底部位置 ??
  • 大致属性同perspective
  • perspective-origin : 50% 200px; 为什么第一个是百分比,第二个是像素值?可以有的值或格式:top,bottom,center,length,%。
  • x-axis 定义该视图在x轴上的位置、
  • y-axis 定义该视图在y轴上的位置

perspective-visibility 定义元素在不面对屏幕时是否可见

混合写法

多个属性值之间用逗号隔开即可。

transform: rotate(30deg) scale(.2) skew(20deg);

兼容性及写法

IE10+以上不用想,其他现代浏览器

chrome、safari要加前缀-webkit-

ie9加前缀-ms-

前缀

transform: ;
-moz-transform: ;
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【python系统学习16】编码基础知识

    就是把人类认识的中英文字、其他国家语言、数字甚至运算符等符号转成二进制的0、1,并进行存储和传输。

    xing.org1^
  • mask遮罩层的华丽写法

    xing.org1^
  • ES6-Babel编译环境搭建

    里边的一个核心功能就是transform,把js代码编程抽象语法树AST。只要变成抽象语法树后,后期的插件才能根据这个抽象语法树进行降级,转成es5。

    xing.org1^
  • 持续关注突发,数据库运维应该关注哪些潜在风险?

    正式分享之前,先对最近热门的删库事件做一点反思。作为DBA应如何加强预防,改进措施防止再出现类似事件呢?我认为主要从三点出发:一是流程规范,二是技术支撑,三是安...

    腾小云
  • Install Office Onlin

    通过安装 Office Online Server 使用户可以在 Exchange Outlook 网页版中查看和编辑受支持的文件附件,而无需先下载这些附件,也...

    py3study
  • LintCode-491.回文数

    11, 121, 1, 12321 这些是回文数。 23, 32, 1232 这些不是回文数。

    悠扬前奏
  • 如何将csv包含的数据导入SAP Cloud Platform HANA MDC里

    本文使用的csv文件从这个链接里下载: http://grouplens.org/datasets/movielens/latest/

    Jerry Wang
  • 【56页PPT】日本旅游,微博深度分析

    大数据文摘
  • 机器学习建模神器PyCaret已开源!提升效率,几行代码轻松搞定模型

    寄语:PyCaret,是一款 Python中的开源低代码(low-code)机器学习库,支持在「低代码」环境中训练和部署有监督以及无监督的机器学习模型,提升机器...

    Datawhale
  • 动态规划法(四)——0/1背包问题

    问题描述 有n个物体,重量分别是w0~wn-1,每个物体放入背包后可获得的收益分别为p0~pn-1,背包载重为M,且所有物体要么放要么不放,不能只放一部分。...

    大闲人柴毛毛

扫码关注云+社区

领取腾讯云代金券