ປະສົງອາຊີບ style transform

ການສະແດງ ແລະ ການນໍາໃຊ້

transform ປະສົງອາຊີບການປ່ຽນວຽກ 2D ຫຼື 3D ຕໍ່ບັນດາປະກອບ. ປະສົງອາຊີບນີ້ອາດຈະປ່ຽນວຽກບັນດາປະກອບດັ່ງກ່າວວ່າ: ການແປງວຽກ, ການຂະຫຍາຍ, ການຍ້າຍ, ການອ້ອຍ, ແລະອີກຫຼາຍອີກ.

ບໍ່ບໍ່ຄຳເຫັນ:

ຄູ່ມື CSS:ປະສົມປະກອບ transform

ຄວາມຄິດທີ່ພິຈາລະນາການປ່ຽນວຽກ:

ການແປງວຽກ div:

document.getElementById("myDIV").style.transform = "rotate(7deg)";

亲自试一试

语法

返回 transform 属性：

object.style.transform

设置 transform 属性：

object.style.transform = "none|transform-functions|initial|inherit"

属性值

值 描述
none 定义不应有转换。
matrix(n, n, n, n, n, n) 使用六个值的矩阵定义二维转换。
matrix3d(n, n, n, n, etc....) 使用 16 个值的 4x4 矩阵定义 3D 转换。
translate(x, y) 定义 2D 平移。
translate3d(x, y, z) 定义 3D 平移。
translateX(x) 定义平移，仅使用 X 轴的值。
translateY(y) 定义平移，仅使用 Y 轴的值。
translateZ(z) 定义 3D 平移，仅使用 Z 轴的值。
scale(x, y) 定义 2D 比例转换
scale3d(x, y, z) 定义 3D 比例转换。
scaleX(x) 通过给 X 轴一个值来定义比例转换。
scaleY(y) 通过给 Y 轴一个值来定义比例转换。
scaleZ(z) 通过给 Z 轴一个值来定义 3D 比例转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x, y, z, angle) ການສະແດງສະແດງ 3D ການປ່ຽນສະໝອງ.
rotateX(angle) ການສະແດງສະແດງ 3D ການປ່ຽນສະໝອງທາງອຸກະກອນ.
rotateY(angle) ການສະແດງສະແດງ 3D ການປ່ຽນສະໝອງທາງຢູບ.
rotateZ(angle) ການສະແດງສະແດງ 3D ການປ່ຽນສະໝອງທາງຊັບ.
skew(x-angle, y-angle) ການສະແດງສະແດງ 2D ການປ່ຽນສະໝອງທາງຢູບ ແລະ ອຸກະກອນ.
skewX(angle) ການສະແດງສະແດງ 2D ການປ່ຽນສະໝອງທາງອຸກະກອນ.
skewY(angle) ການສະແດງສະແດງສະແດງ 2D ການປ່ຽນສະໝອງທາງຢູບ.
perspective(n) ການສະແດງທາງຫຼັງສະແດງສະແດງສະແດງ 3D ການປ່ຽນສະໝອງປະກອບ.
initial ສະຫຼັບປະສົມປະກອບດັ່ງກ່າວຄົນປະກອບ. ບັນຊີການກວດສອບ: initial.
inherit ສະຫຼັບປະສົມປະກອບດັ່ງກ່າວຈາກປະກອບຜູ້ປົກຄອງ. ບັນຊີການກວດສອບ: inherit.

ຂໍ້ມູນດ້ານເຕັກນິກ

ຄຳຕອບສະຫຼັບຄົນປະກອບ: ບໍ່ມີ
ຄຳຕອບສະຫຼັບ: ຄຳເວົ້າທີ່ສະແດງຫົວໜ້າຂອງປະກອບ. ປະສົມປະກອບ transform.
ສະຖານະການ CSS: CSS3

ການສະຫຼັບບາດບັດຊາວບາດບັດ

ຈຳນວນທີ່ໃນຕາຕະລາງອອກສະແດງກັບການການອອກສາຍບາດທີ່ສົມບູນສະຫຼັບປະສົມປະກອບດັ່ງກ່າວ.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0