CSS
【CSS】ボタンをマウスホバー効果で3Dフリップさせる3D Button Flip
September 8, 2018

3D Button Flipはボタンをマウスホバー効果で3Dフリップさせる。
<a href="#" data-text="GLJMedia">GLJMedia</a>
a { position: absolute; top: 50%; left: 50%; text-align: center; transform: translate(-50%,-50%); width: 160px; height: 50px; font-family: sans-serif; font-size: 20px; text-decoration: none; letter-spacing: 2px; text-transform: uppercase; line-height: 50px; background: #ccc; } a:before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: #7647a2; color: #fff; transition: 0.5s; transform-origin: bottom; transform: translateY(-100%) rotateX(90deg); } a:hover:before { transform: translateY(0) rotateX(0deg); } a:after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: #885ead; color: #fff; transition: 0.5s; transform-origin: top; transform: translateY(0) rotateX(0deg); } a:hover:after { transform: translateY(100%) rotateX(90deg); }