div.board{display:flex;flex-wrap:wrap;margin:auto;width:auto}div.board>div{background:#ff0;border:4px outset;box-sizing:border-box;flex:25%;height:10vh;line-height:10vh;opacity:1;text-align:center;transition:opacity .2s ease;vertical-align:middle;width:10vh}div.board>div[data-col="1"]{left:25%}div.board>div[data-col="2"]{left:50%}div.board>div[data-col="3"]{left:75%}div.board>div[data-row="1"]{top:25%}div.board>div[data-row="2"]{top:50%}div.board>div[data-row="3"]{top:75%}div.board.shift>div{transition:transform .3s ease-in-out,opacity .3s ease}div.board.shift>div[data-shift]{opacity:.33;z-index:1000}div.board.shift>div[data-shift="1"]{transform:translate(100%)}div.board.shift>div[data-shift="-1"]{transform:translate(-100%)}div.board.shift>div[data-shift="2"]{transform:translate(200%)}div.board.shift>div[data-shift="-2"]{transform:translate(-200%)}div.board.shift>div[data-shift="3"]{transform:translate(300%)}div.board.shift>div[data-shift="-3"]{transform:translate(-300%)}div.board.shift>div[data-shift="4"]{transform:translateY(100%)}div.board.shift>div[data-shift="-4"]{transform:translateY(-100%)}div.board.shift>div[data-shift="8"]{transform:translateY(200%)}div.board.shift>div[data-shift="-8"]{transform:translateY(-200%)}div.board.shift>div[data-shift="12"]{transform:translateY(300%)}div.board.shift>div[data-shift="-12"]{transform:translateY(-300%)}