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

by nagasawaaaa

Slide 1

Slide 1 text

$445SBOTGPSN4JNVMBUPS Λ7VFKTͰ࡞ͬͨ࿩ 2019.10.31 Satoshi Nagasawa Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2

Slide 2

Slide 2 text

CSS Transform Simulator Λ Vue.js Ͱ ࡞ͬͨ࿩ Profile ▸ ௕ᖒݡʢ!OBHBTBXBBBBʣ ▸ גࣜձࣾύϯη  ϑϩϯτΤϯυΤϯδχΞ ▸ +4ͷϫʔΫγϣοϓ΍ͬͨΓ 7VFKTͷษڧձ΍ͬͨΓ͍ͯ͠·͢ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2

Slide 3

Slide 3 text

transform ͸ CSS ͷϓϩύςΟͰɺ༩͑ΒΕͨཁૉΛճ సɺ֦େॖখɺ܏ࣼɺҠಈ͢Δ͜ͱͰ͖·͢ɻ͜Ε͸ɺ CSS ͷࢹ֮੔ܗϞσϧͷ࠲ඪۭؒΛมߋ͠·͢ɻ USBOTGPSN$44ΧεέʔσΟϯάελΠϧγʔτc.%/ CSS Transform Simulator Λ Vue.js Ͱ ࡞ͬͨ࿩ https://developer.mozilla.org/ja/docs/Web/CSS/transform USBOTGPSNϓϩύςΟͱ͸

Slide 4

Slide 4 text

USBOTJUJPOϓϩύςΟͱ૊Έ߹ΘͤΔ͜ͱʹΑͬͯ Χοί͍͍ΠϯλϥΫγϣϯ΍ ཁૉͷҐஔௐ੔ʹ࢖ͬͨΓͳͲ༻్͸༷ʑ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

֮͑Δͷਏ͍ʜ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

CSS Transform Simulator Λ Vue.js Ͱ ࡞ͬͨ࿩ ࢖ٕͬͨज़ͱ͔ ▸ Vue.js ▸ Vuex  - cssϓϩύςΟͷ஋ʹ࢖༻ ▸ Bootstrap-vue  - ίϯϙʔωϯτͷσβΠϯʹ࢖༻ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2

Slide 14

Slide 14 text

%&.0 https://nagasawaaaa.github.io/css-transform-simulator/ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2

Slide 15

Slide 15 text

ػೳ௥Ճͷཁ๬౳͋Ε͹JTTVF΍ UXJUUFSͰϝϯγϣϯ͚͍ͭͯͩ͘͞ɻ ͦͷ͏ͪ௥Ճ͠·͢ɻ ͪͳΈʹ translate ͱ rotate ͷॱ൪Λม͑Δػೳ͸  ΏΊΈࣾͷʮ΍Ίଠ࿠ʢ@Yametaro1983ʣʯ͞Μͷ  ཁ๬Λ൓ө͠·ͨ͠ɻ Laravel x Vue.js ษڧձ in ΏΊΈࡳຈ vol.2