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

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

Transcript

1. $44
   5SBOTGPSN
   4JNVMBUPS
   Λ
   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