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

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

CSS ຍັງສາມາດນຳໃຊ້ການປ່ຽນແປງ 3D.

ຍັງຄົງມີສະແດງຂອງມັນຂອງຄຸນມູນຄ່າສະແດງຄູ່ວ່າ:

2D rotate
3D rotate

ໃນປະຈຸບັນນີ້, ເຈົ້າຈະຮຽນການສະເໜີ CSS ການຂອງນີ້:

  • transform

ການສະໜັບສະໜູນ

ການສະໜັບສະໜູນຈາກບັນຊີບັນນາທິການ

ການຂອງບໍລິສັດ ຈຸດໃນຕາມການສະແດງບັນທຶກຂອງປະກອງທີ່ສະໜັບສະໜູນຄວາມສະຫງົບຂອງການຂັດຂອງຄວາມສະຫງົບນີ້. IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

ກົນລະບົບ CSS 3D ການປ່ຽນ

ຜ່ານ CSS transform ການຂອງບໍລິສັດ, ເຈົ້າສາມາດນຳໃຊ້ກົນລະບົບ 3D ການປ່ຽນນີ້:

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX() ກົນລະບົບ

ການແປງລະບົບທີ່ສະຕິກັນ X

rotateX() ກົນລະບົບທີ່ຫຼຸດປະກອງຜ່ານທີ່ມີຈຸດສະເຫນີ X:

ກໍານົດ

#myDiv {
  transform: rotateX(150deg);
}

ທ້າວທາງຄົ້ນຄວ້າ

rotateY() ກົນລະບົບ

ການແປງລະບົບທີ່ສະຕິກັນ Y

rotateY() ກົນລະບົບທີ່ຫຼຸດປະກອງຜ່ານທີ່ມີຈຸດສະເຫນີ Y:

ກໍານົດ

#myDiv {
  transform: rotateY(130deg);
}

ທ້າວທາງຄົ້ນຄວ້າ

rotateZ() ກົນລະບົບ

rotateZ() ກົນລະບົບທີ່ຫຼຸດປະກອງຜ່ານທີ່ມີຈຸດສະເຫນີ Z:

ກໍານົດ

#myDiv {
  transform: rotateZ(90deg);
}

ທ້າວທາງຄົ້ນຄວ້າ

CSS ການປ່ຽນ

ບັນທຶກທີ່ລົງຄະແນນທີ່ບັນທຶກການປ່ຽນ 3D:

ການຂອງບໍລິສັດ ການອະທິບາຍ
transform ການນຳໃຊ້ 2D ຫຼື 3D ການປ່ຽນໃສ່ປະກອງ.
transform-origin ອະນຸຍາດໃຫ້ເຮັດການປ່ຽນຕັ້ງຂອງປະກອງທີ່ຖືກປ່ຽນ.
transform-style ການສະເໜີວັດສະດຸຂອງປະກອງບັນດາປະກອງທີ່ພັດພາບໄປໃນສະຖານ 3D.
perspective ການສະເໜີຜົນຂອງການບັນທຶກສະຖານ 3D.
perspective-origin ການສະເໜີການຕັ້ງສະຖານດ້ານລາຍກາງຂອງປະກອງ 3D.
backface-visibility ການສະເໜີວ່າປະກອບອາກາດບໍ່ໄດ້ພົບກັບໜ້າຈໍານວນ.

ກົນລະບົບ CSS 3D ການປ່ຽນ

ກົນລະບົບ ການອະທິບາຍ
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 ການສະເໜີ 3D ການປ່ຽນ, ຜ່ານການວາງຈຸດທີ່ມີ 16 ຈຸດຂອງມັນກັບການວັດສະດຸ 4x4.
translate3d(x,y,z) ການສະເໜີ 3D ການປ່ຽນສະຖານ.
translateX(x) ການສະເໜີ 3D ການປ່ຽນສະຖານ, ຜ່ານການວາງຄຸນທີ່ສະເປົາ X.
translateY(y) ການສະເໜີ 3D ການປ່ຽນສະຖານ, ຜ່ານການວາງຄຸນທີ່ສະເປົາ Y.
translateZ(z) ການສະເໜີ 3D ການປ່ຽນສະຖານ, ຜ່ານການວາງຄຸນທີ່ສະເປົາ Z.
scale3d(x,y,z) ການສະເໜີ 3D ການຂັດແຍ່ງ.
scaleX(x) ການສະເໜີ 3D ການຂັດແຍ່ງຂະຫຍາຍ, ຜ່ານການວາງຄຸນທີ່ສະເປົາ X.
scaleY(y) ການສະເໜີ 3D ການຂັດແຍ່ງຂະຫຍາຍ, ຜ່ານການວາງຄຸນທີ່ສະເປົາ Y.
scaleZ(z) ການສະເໜີ 3D ການຂັດແຍ່ງຂະຫຍາຍ, ຜ່ານການວາງຄຸນທີ່ສະເປົາ Z.
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。