ເນື້ອຫາ
- ເລີ່ມຕົ້ນ
- ການສ້າງພື້ນຖານຂອງ turntable ໄດ້
- ການສ້າງຕີນ
- ແຂນແລະຫົວ
- ສີແລະໂຄງສ້າງ
- ການສະ ເໜີ ແລະສົ່ງອອກ
- ສຳ ເລັດໂລໂກ້
- ສັນຍາລັກທີ່ມີຊີວິດຊີວາ
ມີຫລາຍວິທີໃນການສ້າງພາບເຄື່ອນໄຫວ 3D ໃນເວັບ, ສ່ວນຫລາຍມັນຮຽກຮ້ອງໃຫ້ມີຄວາມຮູ້ທີ່ດີກ່ຽວກັບ JavaScript ແລະ WebGL, ຫລືການ ນຳ ໃຊ້ປັplugກອິນເຊັ່ນ Flash. ຂໍຂອບໃຈກັບການປ່ຽນ CSS CSS, ມັນສາມາດສ້າງ 3D ໂດຍໃຊ້ພຽງ HTML ແລະ CSS ເທົ່ານັ້ນ, ແຕ່ມັນບໍ່ງ່າຍທີ່ຈະເຮັດເຊັ່ນນັ້ນ. Tridiv, app ອອນໄລນ໌ຟຣີຂອງຂ້ອຍ, ເຮັດໃຫ້ຂັ້ນຕອນງ່າຍດາຍ, ສະ ເໜີ ການໂຕ້ຕອບ WYSIWYG ທີ່ງ່າຍດາຍແລະມີຄວາມລະອຽດເຊິ່ງຊ່ວຍໃຫ້ຜູ້ໃຊ້ສາມາດສ້າງວັດຖຸ 3D ໄດ້ໂດຍບໍ່ຕ້ອງຂຽນລະຫັດເສັ້ນດຽວ.
ໃນບົດແນະ ນຳ ນີ້, ພວກເຮົາ ກຳ ລັງຈະສ້າງແລະໃຊ້ໂລໂກ້ ສຳ ລັບ 'Tridiv Records', ປ້າຍຊື່ບັນທຶກທີ່ສົມມຸດຕິຖານ, ໂດຍໃຊ້ພຽງ HTML ແລະ CSS ເທົ່ານັ້ນ. ສາຍຕາຫລັກ ສຳ ລັບໂລໂກ້ ກຳ ລັງຈະຖືກສ້າງຂື້ນເປັນ 3D ໂດຍໃຊ້ Tridiv. ຈາກນັ້ນພວກເຮົາຈະເພີ່ມສ່ວນປະກອບການພິມໂດຍໃຊ້ HTML ແລະ CSS ປົກກະຕິ.
ທ່ານສາມາດເບິ່ງພາບເຄື່ອນໄຫວສຸດທ້າຍແລະລະຫັດທີ່ສ້າງມັນຢູ່ນີ້.
ເລີ່ມຕົ້ນ
ພວກເຮົາ ກຳ ລັງຈະເລີ່ມຕົ້ນໂດຍການສ້າງ turntable ໃນ 3D ໂດຍໃຊ້ Tridiv. ໄປທີ່ tridiv.com ແລະເປີດແອັບ.. ທ່ານຕ້ອງໃຊ້ Chrome, Safari, ຫຼື Opera 15 (ຫຼືຫຼັງຈາກນັ້ນ).
ກ່ອນທີ່ຈະເລີ່ມຕົ້ນ, ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະເຂົ້າໃຈການໂຕ້ຕອບ Tridiv. ສ່ວນຕົ້ນຕໍຂອງບັນນາທິການແມ່ນປະກອບດ້ວຍ 4 ມຸມມອງ: ຢູ່ເບື້ອງຊ້າຍດ້ານເທິງແມ່ນມຸມມອງ 3D, ໃຫ້ທັດສະນີຍະພາບທີ່ສົມບູນ. ອີກສາມມຸມເບິ່ງເຫັນມັນສະແດງຈາກດ້ານເທິງ, ດ້ານຂ້າງແລະດ້ານ ໜ້າ. ໂດຍໃຊ້ສາມມຸມມອງເຫຼົ່ານີ້, ທ່ານສາມາດສ້າງ, ແກ້ໄຂແລະຍ້າຍຮູບຊົງແບບ 3D.
ແຖບເຄື່ອງມືອອກຕາມລວງນອນແບ່ງອອກເປັນສອງພາກສ່ວນ: ເບື້ອງຊ້າຍສະແດງຂໍ້ມູນທີ່ກ່ຽວຂ້ອງກັບເອກະສານຂອງທ່ານ; ສ່ວນທີ່ຖືກຕ້ອງມີເຄື່ອງມືໃນການສ້າງແລະແກ້ໄຂຮູບຮ່າງ. ທ ຍ້າຍ ການຄັດເລືອກແລະ ແກ້ໄຂ ປຸ່ມຕົວເລືອກເລືອກປ່ຽນລະຫວ່າງຮູບແບບການແກ້ໄຂທີ່ແຕກຕ່າງກັນ.
ໜ້າ ຈໍຄຸນລັກສະນະ (ແຖບດ້ານຂ້າງ) ສະແດງການຕັ້ງຄ່າເອກະສານເຊັ່ນ: ຊູມແລະກົດເຂົ້າໄປໃນຕາຂ່າຍໄຟຟ້າ, ແລະຄຸນສົມບັດຂອງຮູບຮ່າງທີ່ເລືອກ (ຂະ ໜາດ, ຕຳ ແໜ່ງ, ໝູນ ວຽນ, ສີ, ແລະອື່ນໆ). ຫົວ ໜ່ວຍ ທີ່ໃຊ້ ສຳ ລັບຂະ ໜາດ ແລະ ຕຳ ແໜ່ງ ແມ່ນ ems; ມຸມຫມູນວຽນແມ່ນຢູ່ໃນອົງສາ.
ເພື່ອຫລີກລ້ຽງຄວາມສັບສົນໃດໆໃນພາຍຫລັງໃນການສອນ, ພວກເຮົາຈະໃຊ້ສັ້ນໆຕໍ່ໄປນີ້:
w = ຄວາມກວ້າງ h = ຄວາມສູງ d = ຄວາມເລິກ diam = ເສັ້ນຜ່າສູນກາງ x deg = ໝູນ ວຽນໃນແກນ x-y y = ການ ໝູນ ວຽນໃນແກນ y-axis z deg = ໝູນ ວຽນໃນແກນ z
ການສ້າງພື້ນຖານຂອງ turntable ໄດ້
ເລີ່ມຕົ້ນໂດຍການຕັ້ງຄ່າຂະຫຍາຍໃຫ້ເປັນ 200. ເພື່ອຊ່ວຍແຕ້ມຮູບ, ກະຕຸ້ນການລາກເຂົ້າໄປໃນການຕັ້ງຄ່າຕາຂ່າຍໄຟຟ້າໃນ ການຕັ້ງຄ່າເອກະສານ ສ່ວນຂອງແຖບຂ້າງ. ກຳ ນົດຄ່າ snap 0.125.
ພື້ນຖານຂອງ turntable ແມ່ນປະກອບດ້ວຍກ້ອນຫີນທີ່ລຽບງ່າຍ, ດັ່ງນັ້ນກົດປຸ່ມ ຕື່ມກ້ອນ ປຸ່ມໃນແຖບເຄື່ອງມືເທິງ. ທ່ານຄວນຈະເຫັນ cuboid ທີ່ປາກົດຢູ່ໃນທັງສີ່ມຸມເບິ່ງໃນບັນນາທິການ.
ປ່ຽນຊື່ໃຫ້ເປັນຮູບຮ່າງ ຖານ ໃຊ້ຊື່ຂໍ້ມູນຂອງແຖບຄຸນສົມບັດ (ຢູ່ພາຍໃຕ້ ຄຸນສົມບັດຮູບຮ່າງ). ຊື່ຂອງຮູບຊົງຕ້ອງເປັນຊື່ຫ້ອງຮຽນ CSS ທີ່ຖືກຕ້ອງເພາະມັນຈະຖືກໃຊ້ໃນລະຫັດທີ່ຜະລິດໂດຍບັນນາທິການ. ພວກເຮົາຈະໃຊ້ຊື່ຫ້ອງຮຽນເຫຼົ່ານີ້ຕໍ່ມາເມື່ອມີສັນຍາລັກໂລໂກ້, ສະນັ້ນໃຫ້ແນ່ໃຈວ່າທ່ານຕັ້ງຊື່ທຸກໆຮູບແບບ ໃໝ່ ທີ່ທ່ານສ້າງໃຫ້ຖືກຕ້ອງ.
ເມື່ອ cuboid ໄດ້ຖືກຕັ້ງຊື່, ໃຫ້ແນ່ໃຈວ່າມັນຖືກເລືອກໃນມຸມມອງດ້ານເທິງ (ມັນຄວນຈະຖືກເນັ້ນເປັນສີຟ້າ, ດ້ວຍວົງແຫວນຂອງເຄື່ອງມືອ້ອມຮອບມັນ), ຈາກນັ້ນກົດປຸ່ມ ແກ້ໄຂ ປຸ່ມຢູ່ເທິງສຸດຂອງແຫວນເພື່ອສະແດງໃຫ້ເຫັນການແກ້ໄຂ. ລາກມືຈັບຄວບຄຸມຢູ່ສອງຂ້າງຂອງແມັດ, ຈົນກ່ວາຄວາມກວ້າງແລະຄວາມເລິກເຖິງ w = 10 ແລະ d = 8 ໃນ ຄຸນສົມບັດຮູບຮ່າງ.
ກົດທີ່ຮູບຊົງພາຍໃນມຸມມອງດ້ານຂ້າງ. ສິ່ງນີ້ຈະສະແດງໃຫ້ເຫັນການແກ້ໄຂການແກ້ໄຂໃນມຸມມອງນີ້, ຊ່ວຍໃຫ້ພວກເຮົາປ່ຽນຄວາມສູງຂອງມັນ. ປັບຄວາມສູງຈົນກວ່າມັນຈະຮອດ h = 2. ທ່ານຍັງສາມາດພິມຄ່າໂດຍກົງເຂົ້າໃນແຖບຄຸນສົມບັດ. ເພື່ອໃຫ້ໄດ້ຕະຫຼອດມູມຂອງລູກບາດ, ປ່ຽນຄຸນຄ່າຂອງມຸມໃນ ໜ້າ ຈໍຄຸນລັກສະນະ 1.75, ຫຼັງຈາກນັ້ນກົດປຸ່ມ [ໃສ່] ທີ່ ສຳ ຄັນໃນການ ນຳ ໃຊ້ການປ່ຽນແປງ. ທ່ານຈະມີບາງສິ່ງບາງຢ່າງເຊັ່ນນີ້.
ການສ້າງຕີນ
ສຳ ລັບຕີນຂອງ turntable, ພວກເຮົາຈະໃຊ້ກະບອກສູບ. ຕື່ມໃສ່ກະບອກ, ຫຼັງຈາກນັ້ນປ່ຽນເສັ້ນຜ່າສູນກາງໃຫ້ເປັນ diam = 1.75 ແລະລະດັບຄວາມສູງຂອງມັນໃຫ້ h = 0.5. ກົດທີ່ ຍ້າຍ ປຸ່ມເລືອກໃນແຖບເຄື່ອງມືດ້ານເທິງເພື່ອສະແດງພື້ນທີ່ທີ່ສາມາດລາກໄດ້ຕາມຮູບຮ່າງ. ຍ້າຍກະບອກພາຍໃຕ້ພື້ນຖານ, ວາງມັນໄວ້ໃນ ໜຶ່ງ ແລວ. (ທ່ານອາດຈະຕ້ອງຍ້າຍມັນຢູ່ມຸມມອງດ້ານເທິງ, ດ້ານຂ້າງແລະດ້ານ ໜ້າ.)
ຖີ້ມກະບອກສູບ (ກົດປຸ່ມ ເຮັດຊ້ ຳ ປຸ່ມໃນວົງມົນຂອງເຄື່ອງມື, ຫຼືກົດປຸ່ມ ດ key) ແລະເພື່ອຍ້າຍກະບອກສູບ ໃໝ່ ໄປຫາອີກມຸມ ໜຶ່ງ ຂອງຖານ. ເຮັດເລື້ມຄືນຂະບວນການຈົນກ່ວາທັງສີ່ຕີນໄດ້ຖືກຈັດຕໍາແຫນ່ງຢ່າງຖືກຕ້ອງ. ຢ່າລືມກ່ຽວກັບການຕັ້ງຊື່ກະບອກສູບ (ຕົວຢ່າງ: ຕີນ - ຊ້າຍ - ເທິງ, ຕີນ - ຂວາ - ເທິງ, ຕີນ - ຊ້າຍ - ລຸ່ມ, ຕີນ - ຊ້າຍ - ເທິງ). ເມື່ອທ່ານເຮັດແບບນັ້ນຜົນໄດ້ຮັບຄວນຈະເປັນແບບນີ້.
ດຽວນີ້ພວກເຮົາຈະເບິ່ງການສ້າງແຜ່ນ, ແຜ່ນດິດ, ແກນແຂນແລະປຸ່ມ. ຂັ້ນຕອນໃນການສ້າງຮູບຊົງຕໍ່ໄປແມ່ນຄ້າຍຄືກັນກັບຕີນ. ນີ້ແມ່ນຂະ ໜາດ ທີ່ໃຊ້ ສຳ ລັບກະບອກສູບທີ່ແຕກຕ່າງກັນ:
platter: diam = 7; h = 0,5 ແຜ່ນ: diam = 6.75; h = 0,25 ປຸ່ມ: diam = 1.5; h = 0,25 ແຂນ - ແກນ - ຖານ: diam = 2.25; h = 0,25 ແຂນແຂນ - ແກນ: diam = 1.375; h = 1
ເພື່ອຫລໍ່ຫລອມສອງດ້ານຂອງກະບອກສູບ, ທ່ານສາມາດເພີ່ມ ຈຳ ນວນໃບ ໜ້າ ໃນແຕ່ລະດ້ານ, ໂດຍ ນຳ ໃຊ້ສອງຂ້າງຂອງປ່ອງໃນ ໜ້າ ຕ່າງຄຸນສົມບັດ. ຢ່າເພີ່ມຫຼາຍດ້ານເພາະວ່າສິ່ງນີ້ສາມາດສົ່ງຜົນກະທົບທາງລົບຕໍ່ຜົນງານຂອງບັນນາທິການທົ່ວໂລກແລະພາບເຄື່ອນໄຫວສຸດທ້າຍ. ໃນກໍລະນີນີ້, ຂ້າພະເຈົ້າຂໍແນະ ນຳ ທ່ານວ່າຢ່າໃຊ້ຫຼາຍກວ່າ 32 ດ້ານ ສຳ ລັບແຜ່ນແລະແຜ່ນ. ທ່ານຄວນມີບາງສິ່ງບາງຢ່າງເຊັ່ນນີ້.
ແຂນແລະຫົວ
ສຳ ລັບແຂນແລະຫົວຂອງ turntable, ພວກເຮົາຈະໃຊ້ cuboids. ສຳ ລັບແຂນ, ສ້າງກ້ອນຫີນ (w = 0.25; h = 0.25; d = 4), ຫຼັງຈາກນັ້ນ ນຳ ໃຊ້ການ ໝູນ ວຽນຂອງ -33° ໃນ ແກນ y. ສຳ ລັບຫົວ, ສ້າງກ້ອນຫີນ (w = 0.5; h = 0.5; d = 1), ຫຼັງຈາກນັ້ນ ນຳ ໃຊ້ການ ໝູນ ວຽນຂອງ -33° ໃນ ແກນ y. ຈັດລຽນຮູບຊົງທັງສອງຂ້າງດ້ວຍກະບອກແຂນແຂນ. ຜົນໄດ້ຮັບຄວນຈະເປັນແບບນີ້.
ສີແລະໂຄງສ້າງ
ພວກເຮົາເກືອບຈະເຮັດໄດ້ແລ້ວກັບ turntable. ຂັ້ນຕອນສຸດທ້າຍແມ່ນການມອບ ໝາຍ ສີສັນແລະ ນຳ ໃຊ້ໂຄງສ້າງໃສ່ແຜ່ນກະລີນ (ຮູບພາບທີ່ສະແດງເຖິງພື້ນຜິວຂອງບັນທຶກ). ເພື່ອ ກຳ ຫນົດສີ, ໃຫ້ເລືອກຮູບຊົງແລະກົດປຸ່ມ ສີ ພາກສະຫນາມໃນ pane ຄຸນສົມບັດ. Tridiv ຊ່ວຍໃຫ້ທ່ານສາມາດລະບຸສີແຕ່ລະສີ ສຳ ລັບແຕ່ລະໃບຂອງຮູບຊົງ, ແຕ່ໃນຕົວຢ່າງນີ້, ພວກເຮົາ ຈຳ ເປັນຕ້ອງໃຊ້ພື້ນທີ່ທັງ ໝົດ ເພື່ອປ່ຽນສີຂອງທຸກໆໃບ ໜ້າ. ເພື່ອເຮັດສິ່ງນີ້, ພຽງແຕ່ໃສ່ລະຫັດສີ hex ໃນພາກສະຫນາມ, ຫຼັງຈາກນັ້ນຢືນຢັນໂດຍກົດ ເຂົ້າ.
ນີ້ແມ່ນສີທີ່ໃຊ້ໃນຕົວຢ່າງນີ້:
ພື້ນຖານ: # 0099FF ຕີນ, ປຸ່ມ, ແກນ, ແຂນແລະຫົວ: # ແຜ່ນ F2EEE5: # fa7f7a
ສຳ ລັບໂຄງສ້າງຂອງ vinyl, ຂະບວນການແມ່ນຄ້າຍຄືກັບການມອບ ໝາຍ ສີ. ເລືອກກະບອກແຜ່ນ, ຈາກນັ້ນກົດປຸ່ມ ຮູບພາບຕ່າງໆ ພາກສະຫນາມໃນ pane ຄຸນສົມບັດ. ວາງ URL ຂອງຮູບພາບທີ່ທ່ານຕ້ອງການສະ ໝັກ ໃສ່ vinyl ໃນດ້ານເທິງແລະຢືນຢັນໂດຍກົດ ເຂົ້າ. ທ່ານສາມາດໃຊ້ຮູບຂອງຕົວທ່ານເອງ, ຫຼືດາວໂຫລດຮູບທີ່ໃຊ້ໃນຕົວຢ່າງນີ້.
ດຽວນີ້ທ່ານຄວນມີບາງສິ່ງບາງຢ່າງທີ່ເບິ່ງຄືວ່ານີ້.
ການສະ ເໜີ ແລະສົ່ງອອກ
ໃນປັດຈຸບັນທີ່ເຮັດໄດ້ແລ້ວ, ພວກເຮົາ ກຳ ລັງຈະ ດຳ ເນີນການແບບທີ່ມັນຖືກ ນຳ ໃຊ້ກ່ອນທີ່ຈະສົ່ງອອກ. ກົດປຸ່ມ ເບິ່ງຕົວຢ່າງ ປຸ່ມຢູ່ເທິງສຸດຂອງ ໜ້າ ຈໍຄຸນສົມບັດ. ຕັ້ງຄ່າຂະຫຍາຍໃຫ້ 200 ການສະແດງ turntable ໃຫຍ່. ເພື່ອ ກຳ ຈັດຂອບສີ ດຳ ຂອງຮູບ, ໄປທີ່ ຊາຍແດນ ສ່ວນຂອງ ໜ້າ ຕ່າງແລະ ກຳ ນົດຄວາມບໍ່ແຈ່ມແຈ້ງ 0. ຜົນໄດ້ຮັບຄວນຈະເບິ່ງບາງສິ່ງບາງຢ່າງເຊັ່ນນີ້.
ພວກເຮົາຕ້ອງການໃຫ້ turntable ໄດ້ຖືກ lit ຈາກເທິງ. ເພື່ອເຮັດສິ່ງນີ້, ໝຸນ ຮູບແບບດັ່ງກ່າວທີ່ດ້ານເທິງຂອງລົດຄັນ ໜຶ່ງ ກຳ ລັງປະເຊີນທ່ານ. ພື້ນຖານຄວນເບິ່ງເປັນຮູບສີ່ຫລ່ຽມມົນຢ່າງສົມບູນ. ການປ່ຽນແປງຄ່າແສງແລະສີ ດຳ ໃນ tridiv.com/d/4k6section ຂອງຄຸນສົມບັດ pane ຈະສ້າງເງົາຄືນ ໃໝ່ ພາຍໃນສາກ. ປ່ຽນຄ່າແສງສະຫວ່າງໃຫ້ເປັນ 0.
ກະຕ່າຍແມ່ນກຽມພ້ອມທີ່ຈະສົ່ງອອກແລ້ວ!
ສຳ ເລັດໂລໂກ້
ພວກເຮົາພ້ອມທີ່ຈະເພີ່ມຂໍ້ຄວາມໃສ່ໂລໂກ້ແລະສ້າງພາບເຄື່ອນໄຫວໂລໂກ້. ກົດປຸ່ມ ແກ້ໄຂ ໃສ່ປຸ່ມ CodePen ຢູ່ເບື້ອງຊ້າຍເບື້ອງຊ້າຍຂອງ ເບິ່ງຕົວຢ່າງ ເບິ່ງເພື່ອສົ່ງອອກລະຫັດໄປທີ່ CodePen. ມັນຄວນຈະໃຫ້ຂໍ້ສັງເກດວ່າລະຫັດ CSS ທີ່ຜະລິດໂດຍ Tridiv ບໍ່ໄດ້ໃຊ້ ຄຳ ນຳ ໜ້າ ຂອງຜູ້ຂາຍ, ດັ່ງນັ້ນທ່ານ ຈຳ ເປັນຕ້ອງໃຊ້ເຄື່ອງມືເຊັ່ນ prefixr.com ຫຼື leaverou.github.io/prefixfree ເພື່ອເຮັດໃຫ້ລະຫັດໃຊ້ງານໃນທຸກໆ browser. ເລີ່ມຕົ້ນດ້ວຍການປິດ ໜ້າ ຈໍ JavaScript, ດັ່ງທີ່ພວກເຮົາບໍ່ໃຊ້ມັນ. ໃນ ໜ້າ ຕ່າງ HTML, ໃຫ້ເອົາແທັບຮູບແບບທີ່ ນຳ ໃຊ້ກັບ .scene div.
ຂະຫຍາຍ CSS pane ແລະເພີ່ມລະຫັດຕໍ່ໄປນີ້ຢູ່ທ້າຍ:
.scene {ການປ່ຽນແປງ: translateY (-140px) rotateX (-55deg); }
ທີ່ນີ້, ໄດ້ translateY (-140px) ຍ້າຍຂະ ໜາດ 140px turntable ຂື້ນໄປ, ເຮັດໃຫ້ຫ້ອງ ສຳ ລັບຕົວ ໜັງ ສືຢູ່ລຸ່ມມັນ. ຈາກນັ້ນ, ທ rotateX (-55deg) ກໍານົດແນວໂນ້ມຕັ້ງຂອງ turntable ໄດ້.
ເພື່ອເພີ່ມຂໍ້ຄວາມ, ທ່ານ ຈຳ ເປັນຕ້ອງເພີ່ມ a .title div ສິດຫຼັງຈາກການເປີດ #tridiv div ໃນ HTML pane. ພາຍໃນ, ຕື່ມສອງ spans> (.main-title ແລະ .sub-title), ແຍກອອກໂດຍ ຊ ./:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> ບັນທຶກ / span> / div> …
ຈາກນັ້ນທ່ານ ຈຳ ເປັນຕ້ອງ ນຳ ໃຊ້ຕົວອັກສອນແລະຮູບແບບທີ່ຖືກຕ້ອງ. ໃນ ໜ້າ ຕ່າງ CSS, ນຳ ເຂົ້າຕົວອັກສອນ Open Sans ທີ່ໃຊ້ໃນໂລໂກ້, ແລະເພີ່ມຮູບແບບພື້ນຖານ ສຳ ລັບອົງປະກອບຂໍ້ຄວາມ.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * ຕົວບລັອກຂໍ້ຄວາມກາງ + ຮູບແບບຕົວອັກສອນພື້ນຖານ * / ຫົວຂໍ້ {ຕຳ ແໜ່ງ: absolute; ອັນດັບ: 50%; ຊ້າຍ: 50%; ຂອບ: 0 0 0 -165px; ຄວາມກວ້າງ: 330px; ລະດັບຄວາມສູງ: 5em; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 24px; text-align: ສູນກາງ; ຈົດ ໝາຍ ສະບັບ: 1.5em; ສີ: # 0099FF; } ຫົວຂໍ້ hr {ຊາຍແດນ: 1px ແຂງ # fa7f7a; ຂອບ: .75em 0; } ຫົວຂໍ້ກວ້າງ {ສະແດງ: ບັອກ; } .main-title {font-size: 2.15em; } .sub-title {text-indent: .25em; }
Voilà! ໂລໂກ້ຂອງທ່ານ ສຳ ເລັດແລ້ວ. ມັນຄວນມີລັກສະນະຄ້າຍຄືກັບຮູບພາບຂ້າງລຸ່ມ. ເມື່ອຮູບແບບ 3D ຂອງທ່ານ ສຳ ເລັດແລ້ວ, ທ່ານສາມາດໃຊ້ພະລັງງານຂອງ CSS ເພື່ອເຮັດໃຫ້ມັນດີຂື້ນໂດຍການເພີ່ມຮູບແບບ, ພາບເຄື່ອນໄຫວຫລືເຫດການຂອງຫນູ: ພຽງແຕ່ປະຕິບັດກັບຮູບແບບ 3D ຄືກັບອົງປະກອບ HTML ອື່ນໆ.
ສັນຍາລັກທີ່ມີຊີວິດຊີວາ
ເບິ່ງພາບເຄື່ອນໄຫວໂດຍໃຊ້ໂລໂກ້ຢູ່ບ່ອນນີ້. ໃນຂະນະທີ່ພາກສ່ວນຂອງ turntable 'ຫຼຸດລົງ', ພວກເຂົາແຕ່ລະແບ່ງປັນພາບເຄື່ອນໄຫວ keyframe ດຽວກັນກັບການເລື່ອນເວລາທີ່ແຕກຕ່າງກັນ. ຮູບຊົງຕ່າງໆມີຄຸນລັກສະນະສູງສຸດຕັ້ງ 50%. ເພື່ອສ້າງຜົນກະທົບທີ່ຫຼຸດລົງ, ພວກເຮົາມີຄຸນລັກສະນະສູງສຸດຈາກ -400px ເຖິງ 50%:
@keyframes ຫຼຸດລົງ {0% {ເທິງ: -400px; } / * ພວກເຮົາເລີ່ມຕົ້ນການເຄື່ອນໄຫວການຈັດຕໍາ ແໜ່ງ ຮູບຊົງໃຫ້ສູງເຖິງ 400px * / 100% {ສູງສຸດ: 50%; } / * ຈາກນັ້ນພວກເຮົາຈົບລົງໃນ ຕຳ ແໜ່ງ ເດີມຂອງມັນ * /}
ທ່ານສາມາດເພີ່ມພາບເຄື່ອນໄຫວນີ້ໃຫ້ເປັນຮູບຊົງທຸກຮູບແບບ, ດັ່ງຕໍ່ໄປນີ້:
.shape {ດ້ານເທິງ: -400px; ພາບເຄື່ອນໄຫວ: ຫຼຸດລົງ 1s ສະດວກສະບາຍ 0s ຕໍ່; }
ຕັ້ງຄຸນລັກສະນະສູງສຸດໃຫ້ -400px ແລະເພີ່ມຄວາມລ່າຊ້າ:
.platter {ພາບເຄື່ອນໄຫວ - ຊັກຊ້າ: 1.05s; } .disc {ພາບເຄື່ອນໄຫວ - ຊັກຊ້າ: 1.35s; } .button {ພາບເຄື່ອນໄຫວ - ຊັກຊ້າ: 1.5s; } ...
ສ້າງຜົນກະທົບສຸດທ້າຍຂອງການໃຊ້ໂດຍໃຊ້ ໝຸນ ວຽນ X ຄຸນລັກສະນະ:
90% {ຫັນປ່ຽນ: translateY (-5em) rotX (780deg) rotY (0deg); } 95% {ຫັນປ່ຽນ: translateY (-4em) rotateX (620deg) rotY (0deg); } 100% {ຫັນປ່ຽນ: translateY (-4.5em) rotX (660deg) rotY (0deg); }
ນັ້ນແມ່ນວິທີທີ່ພວກເຮົາສ້າງແບບສະບັບນີ້, ແຕ່ຈື່ໄວ້ວ່າ: ບໍ່ມີຂໍ້ ຈຳ ກັດ!
ຄຳ ເວົ້າ: Julian Garnier
ບົດຂຽນນີ້ປະກົດຢູ່ໃນວາລະສານສຸດທິສະບັບ 248.
