#wrap { width:100px; height:100px; margin:50px auto; transform-style:preserve-3d; transform-origin:center 100%; color:white; position:relative; top:0; transition:all 0.5s linear; } #wrap:hover { top:-100px; transform:perspective(300px) rotateX(90deg); } #wrap div:nth-child(1) { width:100px; height:100px; background:#38f; padding:5px; box-sizing:border-box; } #wrap div:nth-child(2) { width:100px; height:100px; background:#68d; transform-origin:0 0; transform:rotateX(-90deg); padding:5px; box-sizing:border-box; } @keyframes anim { 100% { transform-origin:0 0; transform:rotateX(90deg); } }