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

手触りの良いUIを 名刺表現の巻

手触りの良いUIを 名刺表現の巻

2019/6/12 Sansan社内LT大会用資料です

mtblue81

June 12, 2019
Tweet

More Decks by mtblue81

Other Decks in Technology

Transcript

  1. ͘͠Έ ยํΛཪฦ͠ʹ͠·͢ image-front.png image-front.png <div> <img src=‘image-front.png’ class=‘front’/> <img src=‘image-back.png’

    class=‘back flipped’/> </div> .back { margin-top: -1 * imageHeight; } .flipped { transform: rotateY(180deg); }
  2. ͘͠Έ ཪଆʹͳΔը૾ͷclassΛ੾Γସ͑·͢ image-front.png image-back.png <div> <img src=‘image-front.png’ class=‘front flipped’/> <img

    src=‘image-back.png’ class=‘back’/> </div> .back { margin-top: -1 * imageHeight; } .flipped { transform: rotateY(180deg); }
  3. ͘͠Έ ը૾͕ཪଆʹͳͬͨͱ͖ʹඇදࣔʹ͠·͢ ճసͷͨΊͷΞχϝʔγϣϯΛ௥Ճ͠·͢ image-front.png image-back.png <div> <img src=‘image-front.png’ class=‘front’/> <img

    src=‘image-back.png’ class=‘back flipped’/> </div> … ུ img { backface-visibility: hidden; transition: transform .3s; } image-front.png