CSS ການປ່ຽນແປງ 2D

CSS ການປ່ຽນແປງ 2D

CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。

ຖົກຖຽງຫົວຂໍ້ລຸ່ມນັ້ນຈະເຫັນ 2D ການປ່ຽນປ່ານ:

2D rotate

ໃນປະຈຸບັນນີ້ທ່ານຈະຮຽນ CSS ອາດສະກັອງນີ້:

  • transform

ການສະໜັບສະໜູນຈາກສານບັນຈຸບັນ.

ຈຳນວນໃນຕາລະບັນຍັດຈະບອກກັບການສະໜັບສະໜູນຄວາມບອກຄວາມຈະລະບຸອັນດັບການສະໜັບສະໜູນຄັບທີ່ທໍາອິດຂອງຜູ້ຄົນ.

ຄວາມ Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

ກົນວຽກຂອງການປ່ຽນສະໝັກ 2D CSS

ຜ່ານ CSS transform ຜົນງານ, ທ່ານສາມາດນຳໃຊ້ວິທີການປ່ຽນປ່ານ 2D ນີ້:

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

ຄຳແນະນຳ:ທ່ານຈະຮຽນ 3D ການປ່ຽນປ່ານໃນຕອນຕໍ່ໄປ.

ວິທີການ translate()

Translate

translate() ວິທີການຂົນສົ່ງປະກອບສິ່ງຈາກສະຖານະປະກອບສິ່ງທີ່ເປັນຕົ້ນ (ອີງຕາມຄຸນນະພາບທີ່ໃຫ້).

ບົດສະຫຼຸບນີ້ຢູ່ຫຼັງຈາກ <div> ອາດຕັ້ງໃຫ້ມີການຂົນສົ່ງປະກອບສິ່ງມາ 50 ພັກສານທາງຕາມ X ແລະມາ 100 ພັກສານທາງຕາມ Y:

ຄວາມກໍານົດ

div {
  transform: translate(50px, 100px);
}

ທ້າທາຍພາສາຕອນຕົ້ນ

ວິທີການ rotate()

Rotate

rotate() ວິທີການຫຼັງຄູ່ຫຼືດ້ານໜ້າປະກອບສິ່ງອີງຕາມຄຸນນະພາບທີ່ໃຫ້.

ບົດສະຫຼຸບນີ້ຢູ່ຫຼັງຈາກ <div> ອາດຕັ້ງໃຫ້ມີວັດທະນາຍວັດຈຸບານຂອງມັນດ້ານໜ້າ 20 ອັງສາ:

ຄວາມກໍານົດ

div {
  transform: rotate(20deg);
}

ທ້າທາຍພາສາຕອນຕົ້ນ

ນຳໃຊ້ຄຸນນະພາບລົບເພື່ອຫຼັງຄູ່ປະກອບສິ່ງ.

ບົດສະຫຼຸບນີ້ຢູ່ຫຼັງຈາກ <div> ອາດຕັ້ງໃຫ້ມີວັດທະນາຍວັດຈຸບານຂອງມັນຫຼັງຄູ່ 20 ອັງສາ:

ຄວາມກໍານົດ

div {
  transform: rotate(-20deg);
}

ທ້າທາຍພາສາຕອນຕົ້ນ

ວິທີການ scale()

Scale

scale() ວິທີການກວດຄືນຫຼືຫຼຸດວັດທະນາຍວັດຈຸບານຂອງປະກອບສິ່ງ (ອີງຕາມຂັ້ນຕອນວັດທະນາຍວັດຈຸບານທີ່ໃຫ້).

ບົດສະຫຼຸບນີ້ຢູ່ຫຼັງຈາກ <div> ອາດຕັ້ງໃຫ້ມີວັດທະນາຍວັດຈຸບານຂອງມັນສອງເທົ່າວັດທະນາຍວັດຈຸບານວັດຈຸບານຂອງມັນສາມເທົ່າ:

ຄວາມກໍານົດ

div {
  transform: scale(2, 3);
}

ທ້າທາຍພາສາຕອນຕົ້ນ

ບົດສະຫຼຸບນີ້ຢູ່ຫຼັງຈາກ <div> ອາດຕັ້ງໃຫ້ມີວັດທະນາຍວັດຈຸບານຂອງມັນຫຼຸດຫຼາຍເປັນເຄິ່ງໜຶ່ງວັດທະນາຍວັດຈຸບານຂອງມັນ:

ຄວາມກໍານົດ

div {
  transform: scale(0.5, 0.5);
}

ທ້າທາຍພາສາຕອນຕົ້ນ

ວິທີການ scaleX()

scaleX() ວິທີການກວດຄືນຫຼືຫຼຸດວັດທະນາຍວັດຈຸບານຂອງປະກອບສິ່ງ.

ບົດສະຫຼຸບນີ້ຢູ່ຫຼັງຈາກ <div> ອາດຕັ້ງໃຫ້ມີວັດທະນາຍວັດຈຸບານຂອງມັນສອງເທົ່າ:

ຄວາມກໍານົດ

div {
  transform: scaleX(2);
}

ທ້າທາຍພາສາຕອນຕົ້ນ

ບົດສະຫຼຸບນີ້ຂຽນ <div> ອາດຕັ້ງໃຫ້ມີວັດທະນາຍວັດຈຸບານຂອງມັນເຄິ່ງໜຶ່ງ:

ຄວາມກໍານົດ

div {
  transform: scaleX(0.5);
}

ທ້າທາຍພາສາຕອນຕົ້ນ

scaleY() 方法

scaleY() 方法增加或减少元素的高度。

下面的例子把

元素增大到其原始高度的三倍：

ຄວາມກໍານົດ

div {
  transform: scaleY(3);
}

ທ້າທາຍພາສາຕອນຕົ້ນ

下面的例子把

元素缩减为其原始高度的一半：

ຄວາມກໍານົດ

div {
  transform: scaleY(0.5);
}

ທ້າທາຍພາສາຕອນຕົ້ນ

skewX() 方法

skewX() 方法使元素沿 X 轴倾斜给定角度。

下例把

元素沿X轴倾斜 20 度：

ຄວາມກໍານົດ

div {
  transform: skewX(20deg);
}

ທ້າທາຍພາສາຕອນຕົ້ນ

skewY() 方法

skewY() 方法使元素沿 Y 轴倾斜给定角度。

下例把

元素沿 Y 轴倾斜 20 度：

ຄວາມກໍານົດ

div {
  transform: skewY(20deg);
}

ທ້າທາຍພາສາຕອນຕົ້ນ

skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

下面的例子使

元素沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度：

ຄວາມກໍານົດ

div {
  transform: skew(20deg, 10deg);
}

ທ້າທາຍພາສາຕອນຕົ້ນ

如果未指定第二个参数，则值为零。因此，下例使

元素沿 X 轴倾斜 20 度：

ຄວາມກໍານົດ

div {
  transform: skew(20deg);
}

ທ້າທາຍພາສາຕອນຕົ້ນ

matrix() 方法

Rotate

matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

ພະລາດຊະນະດັ່ງຕໍ່ມາ: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

ຄວາມກໍານົດ

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

ທ້າທາຍພາສາຕອນຕົ້ນ

ຄວາມຂອງການປ່ຽນສະໝັກ CSS

ມູນຄໍາວັດຕະລາງທີ່ອະທິບາຍທຸກຄວາມຂອງການປ່ຽນສະໝັກ 2D:

ຄວາມ ການອະທິບາຍ
transform ນຳໃຊ້ 2D ຫຼື 3D ການປ່ຽນສະໝັກໃສ່ປະກອບອາກາດ。
transform-origin ອະນຸຍາດໃຫ້ເຮັດໃຫ້ບັນດາປະກອບອາກາດທີ່ຖືກປ່ຽນສະໝັກຕັ້ງຂອງຕົວເລື່ອງຕັ້ງເທື່ອ。

ກົນວຽກຂອງການປ່ຽນສະໝັກ 2D CSS

ກອງການ ການອະທິບາຍ
matrix(n,n,n,n,n,n) ການອະທິບາຍການປ່ຽນສະໝັກ 2D ທີ່ໃຊ້ຈຸດພາກສາຍຫົກຈຸດຄູ່ມູນ。
translate(x,y) ການອະທິບາຍການປ່ຽນສະໝັກ 2D ທີ່ຍ້າຍໄປຕາມອັດສະນະ X ແລະ Y。
translateX(n) ການອະທິບາຍການປ່ຽນສະໝັກ 2D ທີ່ຍ້າຍໄປຕາມອັດສະນະ X。
translateY(n) ການອະທິບາຍການປ່ຽນສະໝັກ 2D ຂອງບັນດາປະກອບອາກາດທີ່ໄດ້ຍ້າຍໄປຕາມອັດສະນະ Y。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。