ປະກາດການຈັດສັບຄຳຂຽນ CSS transform-origin

ການອະທິບາຍ ແລະ ການນໍາໃຊ້

ປະສົມປະກອບ transform-origin ສາມາດປ່ຽນການຕັ້ງຂອງສິ່ງທີ່ຈະສ້າງ transform.

ສິ່ງທີ່ສາມາດປ່ຽນການສ້າງ 2D transform ຂອງສິ່ງທີ່ສາມາດປ່ຽນການສ້າງ x ແລະ y axis. ສິ່ງທີ່ສາມາດປ່ຽນການສ້າງ 3D transform ຂອງສິ່ງທີ່ສາມາດປ່ຽນການສ້າງ Z axis.

ເພື່ອເຂົ້າໃຈການສ້າງ transform-origin ຂອງ transform-origin ຂະແໜງກໍລະນີນີ້:ການສະແດງ.

ຜູ້ນຳໃຊ້ Safari/Chrome: ເພື່ອເຂົ້າໃຈການສ້າງ transform-origin ຂອງ transform-origin ຂອງ 3D transform ຂະແໜງກໍລະນີນີ້:ການສະແດງ.

ຄວາມຄິດເຫັນ:ການສະແດງທີ່ຕ້ອງຜູກມັດ: transform ການທີ່ສະໜັບສະໜູນ

ເພື່ອເຂົ້າໃຈການສ້າງ transform ຂະແໜງຂອງ transform ຂະແໜງກໍລະນີນີ້:ການສະແດງ.

ບໍ່ອາດບໍ່ໄດ້ບັງຄັບ:

ການສອນ CSS3:CSS3 2D ການປ່ຽນສະແດງ

ການສອນ CSS3:CSS3 3D ການປ່ຽນສະແດງ

ສານອະທິບາຍ HTML DOM:ປະສົມປະກອບ transform-origin

ກໍລະນີ

ການຕັ້ງຂອບຂ້ອງຂອງສິ່ງທີ່ຈະສ້າງການຫົວວົງການສະແດງ:

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

ພະຍາຍາມພຽງພໍ

ມີຫຼາຍກໍລະນີທີ່ຫຼາຍກວ່ານີ້ຢູ່ບ່ອນດັ່ງກ່າວ.

ການອັກຄຳການ CSS

transform-origin: x-axis y-axis z-axis;

ຄູ່ມົນປະກອບ

ຈຳນວນ ການອະທິບາຍ
x-axis

ການສະແດງທີ່ຕັ້ງຄວາມຕາຍຂອງການເບິ່ງຄືບໜ້າທີ່ຕັ້ງຢູ່ຂອງຖານ X.

  • ຊ້າຍນອກ
  • ກາງ
  • ຊ້າຍ
  • length
  • %
y-axis

ການສະແດງທີ່ຕັ້ງຄວາມຕາຍຂອງການເບິ່ງຄືບໜ້າທີ່ຕັ້ງຢູ່ຂອງຖານ Y.

  • ຕົວເດືອນ
  • ກາງ
  • ດາວເດືອນ
  • length
  • %
z-axis

ການສະແດງທີ່ຕັ້ງຄວາມຕາຍຈາກມັນທີ່ທີ່ຈະຕັ້ງຄວາມຕາຍຂອງການເບິ່ງຄືບໜ້າທີ່ຕັ້ງຢູ່ຂອງຖານ Z.

  • length

ລາຍລະອຽດດ້ານເຕັກນິກ

ຄູ່ມົນປະກອບ: 50% 50% 0
ການສືບທອດ: no
ສະຖານະ: CSS3
ການອັກຄຳການ JavaScript: object.style.transformOrigin="20% 40%"

ການສະໜັບສະໜູນບັນຍັດບັດເບິ່ງ

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

ຈຳນວນທີ່ມີ -webkit-、-moz- ຫຼື -ms- ກ່າວວ່ານຳໃຊ້ພິດທະນາຍຂັ້ນທໍາອິດ.

ປະກອບ Chrome IE Firefox Safari Opera
transform-origin
(ວິທີການສອງວິທີ)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform-origin
(ສາມວິທີການ)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-