Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Transform Simulator を Vue.js で 作った話

CSS Transform Simulator を Vue.js で 作った話

2019.10.31
Laravel x Vue.js 勉強会 in ゆめみ札幌 vol.2

nagasawaaaa

October 31, 2019
Tweet

More Decks by nagasawaaaa

Other Decks in Programming

Transcript

  1. $445SBOTGPSN4JNVMBUPS Λ7VFKTͰ࡞ͬͨ࿩ 2019.10.31 Satoshi Nagasawa Laravel x Vue.js ษڧձ in

    ΏΊΈࡳຈ vol.2
  2. CSS Transform Simulator Λ Vue.js Ͱ ࡞ͬͨ࿩ Profile ▸ ௕ᖒݡʢ!OBHBTBXBBBBʣ

    ▸ גࣜձࣾύϯη
 ϑϩϯτΤϯυΤϯδχΞ ▸ +4ͷϫʔΫγϣοϓ΍ͬͨΓ 7VFKTͷษڧձ΍ͬͨΓ͍ͯ͠·͢ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2
  3. transform ͸ CSS ͷϓϩύςΟͰɺ༩͑ΒΕͨཁૉΛճ సɺ֦େॖখɺ܏ࣼɺҠಈ͢Δ͜ͱͰ͖·͢ɻ͜Ε͸ɺ CSS ͷࢹ֮੔ܗϞσϧͷ࠲ඪۭؒΛมߋ͠·͢ɻ USBOTGPSN$44ΧεέʔσΟϯάελΠϧγʔτc.%/ CSS Transform

    Simulator Λ Vue.js Ͱ ࡞ͬͨ࿩ https://developer.mozilla.org/ja/docs/Web/CSS/transform USBOTGPSNϓϩύςΟͱ͸
  4. USBOTJUJPOϓϩύςΟͱ૊Έ߹ΘͤΔ͜ͱʹΑͬͯ Χοί͍͍ΠϯλϥΫγϣϯ΍ ཁૉͷҐஔௐ੔ʹ࢖ͬͨΓͳͲ༻్͸༷ʑ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2

  5. CSS Transform Simulator Λ Vue.js Ͱ ࡞ͬͨ࿩ ϓϩύςΟʹઃఆͰ͖Δ஋͕ଟ͍ ▸ transform:

    matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); ▸ transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); ▸ transform: perspective(17px); ▸ transform: rotate(0.5turn); ▸ transform: rotate3d(1, 2.0, 3.0, 10deg); ▸ transform: rotateX(10deg); ▸ transform: rotateY(10deg); ▸ transform: rotateZ(10deg); ▸ transform: translate(12px, 50%); ▸ transform: translate3d(12px, 50%, 3em); ▸ transform: translateX(2em); ▸ transform: translateY(3in); ▸ transform: translateZ(2px); ▸ transform: scaleX(2); ▸ transform: scaleY(0.5); ▸ transform: scaleZ(0.3); ▸ transform: skew(30deg, 20deg); ▸ transform: skewX(30deg); ▸ transform: skewY(1.07rad); Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2
  6. ֮͑Δͷਏ͍ʜ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2

  7. ۀ຿Ͱׂͱ࢖͏΍͚ͭͩͰ΋ αΫοͱઃఆͯ͠ίϐϖ͍ͨ͠ rotateܥɺtranslateܥɺscaleXܥ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2

  8. ࡞Ζ͏ʂ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2

  9. ͔͠͠Ͳ͏΍ͬͯʁ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2

  10. 7VFKTͷษڧձ։͍͍ͯΔ͔Βʹ͸ 7VFKTͰԿ͔Ξ΢τϓοτͤͳʜ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2

  11. ͔ͩΒ7VFKTͰ࡞Γ·ͨ͠ https://nagasawaaaa.github.io/css-transform-simulator/ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2

  12. Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2

  13. CSS Transform Simulator Λ Vue.js Ͱ ࡞ͬͨ࿩ ࢖ٕͬͨज़ͱ͔ ▸ Vue.js

    ▸ Vuex
 - cssϓϩύςΟͷ஋ʹ࢖༻ ▸ Bootstrap-vue
 - ίϯϙʔωϯτͷσβΠϯʹ࢖༻ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2
  14. %&.0 https://nagasawaaaa.github.io/css-transform-simulator/ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2

  15. ػೳ௥Ճͷཁ๬౳͋Ε͹JTTVF΍ UXJUUFSͰϝϯγϣϯ͚͍ͭͯͩ͘͞ɻ ͦͷ͏ͪ௥Ճ͠·͢ɻ ͪͳΈʹ translate ͱ rotate ͷॱ൪Λม͑Δػೳ͸
 ΏΊΈࣾͷʮ΍Ίଠ࿠ʢ@Yametaro1983ʣʯ͞Μͷ
 ཁ๬Λ൓ө͠·ͨ͠ɻ

    Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2
  16. Έͳ͞Μɺ͔ͭͬͯͶʂ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2

  17. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2