<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>@charset "utf-8";
/*== 背景共通設定 */
body {
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url("/wp-content/uploads/demos/_assets/img_06.jpg");
object-fit: cover;
}
/*== ボタン共通設定 */
/*ボタンの配置*/
.btn-position {
display: flex;
flex-direction: column;
align-items: center;
}
/*== ボタン共通設定 */
.btn {
/*背景の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
display: inline-block;
width: 100%;
height: 80px;
line-height: 80px;
padding: 40px 0;
margin: 20px 0;
text-align: center;
outline: none;
width: clamp(240px, 50vw, 500px); /*ボタンの横幅を全て統一*/
}
/*ボタン内側の設定*/
.btn span {
display: block;
position: absolute;
width: 100%;
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.18);
/* 重なりを3Dで表示 */
transform-style: preserve-3d;
/* アニメーションの設定 数字が少なくなるほど早く回転 */
transition: 0.5s;
font-size: clamp(0.8rem, 2vw, 1rem);
}
/*== くるっと回転（手前に） */
/* 回転前 */
.rotatefront span:nth-child(1) {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(6.5px);
-webkit-backdrop-filter: blur(6.5px);
color: #000;
transform: rotateX(0deg); /*はじめは回転なし*/
transform-origin: 0 50% -40px; /* 回転する起点 */
}
/*hoverをした後の形状*/
.rotatefront:hover span:nth-child(1) {
transform: rotateX(-90deg); /* X軸に-90度回転：手前に回転 */
}
/* 回転後 */
.rotatefront span:nth-child(2) {
background: rgba(90, 150, 255, 0.5);
color: #fff;
transform: rotateX(90deg); /*はじめはX軸に90度回転した状態*/
transform-origin: 0 50% -40px; /* 回転する起点 */
}
/*hoverをした後の形状*/
.rotatefront:hover span:nth-child(2) {
transform: rotateX(0deg); /* X軸に0度回転：奥に回転 */
}
/*== くるっと回転（奥に） */
/* 回転前 */
.rotateback span:nth-child(1) {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(6.5px);
-webkit-backdrop-filter: blur(6.5px);
color: #000;
transform: rotateX(0deg); /*はじめは回転なし*/
transform-origin: 0 50% -40px; /* 回転する起点 */
}
/*hoverをした後の形状*/
.rotateback:hover span:nth-child(1) {
transform: rotateX(90deg); /* X軸に90度回転：奥に回転 */
}
/* 回転後 */
.rotateback span:nth-child(2) {
background: rgba(90, 150, 255, 0.5);
color: #fff;
transform: rotateX(-90deg); /*はじめはX軸に-90度回転*/
transform-origin: 0 50% -40px; /* 回転する起点 */
}
/*hoverをした後の形状*/
.rotateback:hover span:nth-child(2) {
transform: rotateX(0deg); /* X軸に0度回転：手前に回転 */
}
/*========= レイアウトのためのCSS ===============*/
body {
vertical-align: middle;
padding: 20px 0;
text-align: center;
}
p {
margin: 0 0 10px 0;
}</style>
</head>
<body>
<body>
<div class="btn-position">
<a href="#" class="btn rotatefront">
<span>くるっと回転（手前に）</span>
<span>回転後（手前に）</span>
</a>
<a href="#" class="btn rotateback">
<span>くるっと回転（奥に）</span>
<span>回転後（奥に）</span>
</a>
</div>
<script>
</script>
</body>
</html>