cman.jp > パーツ作成メニュー > ボタンのデザイン > ボタンを回転する

ボタンを回転させるCSS作成

ボタンにマウスを乗せた時に回転させることで、立体的なボタンとなります。

当ページでは、簡単な操作でボタンを回転させる方法を確認できます。

ボタンを回転表示させるには、「transform-style: preserve-3d」を指定します。
「transform-style」は、古いブラウザや一部ブラウザでは動作しません。
未対応のブラウザでは、正しく表示されません。

ボタンを回転させよう！

ボタンを色々な方向に回転できますのでお試しください。

回転速度

回転方向

上から下から右から左から

Buttonの色

他▶

透明度

Buttonの文字の色

他▶

透明度

Clickの色

他▶

透明度

Clickの文字の色

他▶

透明度

ButtonClick

使用したhtml

<a class="btn" href="https://www.cman.jp"><span>Button</span><span>Click</span></a>

生成したCSS

<style type="text/css">
.btn {
  display: inline-block;           /* 改行なしのブロック要素 */
  position: relative;              /* 相対位置指定 */
  width: 200px;                    /* 横幅 */
  height: 60px;                    /* 高さ */
  text-align: center;              /* 水平方向は中央揃え */
  line-height: 56px;               /* 行の高さ */
}
.btn span {
  display: block;                  /* ブロック要素 */
  position: absolute;              /* 親要素の左上を基準位置 */
  width: 100%;                     /* 横幅 */
  height: 100%;                    /* 高さ */
  border: 2px solid #333;          /* 罫線 */
  transition: .5s;                 /* 変化時間 */
  transform-style: preserve-3d;    /* 重なりを3Dで表示 */
}
.btn span:nth-child(1) {
  background-color: #fff;          /* Buttonボタンの色 */
  color: #333;                     /* Buttonの文字の色 */
  transform: rotateX(0deg);        /* 横軸の回転なし */
  transform-origin: 0 50%  -30px;  /* transformの起点 */
}
.btn span:nth-child(2) {
  background-color: #333;          /* Clickボタンの色 */
  color: #fff;                     /* Clickの文字の色 */
  transform: rotateX(90deg);       /* 横軸で90度回転 */
  transform-origin: 0 50%  -30px;  /* transformの起点 */
}
.btn:hover span:nth-child(1) {
  transform: rotateX(-90deg);      /* 横軸で前方に90度回転 */
}
.btn:hover span:nth-child(2) {
  transform: rotateX(0deg);        /* 横軸の回転なし */
}
</style>

ページTOP

疑似要素::beforeを使用してボタンを回転させる

ボタンにマウスを乗せると上から下へ回転

Button

<a class="button1" href="https://www.cman.jp "><span>Button</span></a>

<style type="text/css">
.button1 {
  text-align: center;                  /* 水平方向は中央揃え */
  line-height: 56px;                   /* 行の高さ */
}
.button1 span {
  width: 200px;                        /* 横幅 */
  height: 60px;                        /* 高さ */
  display: inline-block;               /* 改行なしのブロック要素 */
  position: relative;                  /* 相対位置指定 */
  background-color: #fff;              /* Buttonボタンの色 */
  color: #000066;;                     /* Buttonの文字の色 */
  transition: transform 0.5s;          /* 回転時間 */
  transform-origin: 50% 100%;          /* transformの起点 */
  transform-style: preserve-3d;        /* 重なりを3Dで表示 */
  border: 2px solid #000066;           /* 罫線 */
}
.button1 span::before {               /* "Click"の挿入 */
  position: absolute;                  /* 親要素の左上を基準位置 */
  top: -100%;                          /* 基準位置から上端までの距離 */
  left: -1%;                           /* 基準位置から左端までの距離 */
  width: 100%;                         /* 横幅 */
  height: 100%;                        /* 高さ */
  content: "Click";                    /* 文字列の挿入 */
  transition: background 1.0s;         /* ボタンの色の変化時間 */
  transform: rotateX(90deg);           /* 横軸で90度回転 */
  transform-origin: 50% 100%;          /* transformの起点 */
  border: 2px solid #000066;;          /* 罫線 */
}
.button1:hover span {
  transform: rotateX(-90deg);          /* 横軸で前方に90度回転 */
}
.button1:hover span::before{
  background-color: #000066;;          /* Clickボタンの色 */
  color: #fff;                         /* Clickの文字の色 */
}
</style>

ボタンにマウスを乗せると下から上へ回転

Button

<a class="button1" href="https://www.cman.jp "><span>Button</span></a>

<style type="text/css">
.button2 {
  text-align: center;                  /* 水平方向は中央揃え */
  line-height: 56px;                   /* 行の高さ */
}
.button2 span {
  width: 200px;                        /* 横幅 */
  height: 60px;                        /* 高さ */
  display: inline-block;               /* 改行なしのブロック要素 */
  position: relative;                  /* 相対位置指定 */
  background-color: #fff;              /* Buttonボタンの色 */
  color: #000066;;                     /* Buttonの文字の色 */
  transition: transform 0.5s;          /* 回転時間 */
  transform-origin: 50% 0%;            /* transformの起点 */
  transform-style: preserve-3d;        /* 重なりを3Dで表示 */
  border: 2px solid #000066;           /* 罫線 */
}
.button2 span::before {                /* "Click"の挿入 */
  position: absolute;                  /* 親要素の左上を基準位置 */
  top: 100%;                           /* 基準位置から上端までの距離 */
  left: -1%;                           /* 基準位置から左端までの距離 */
  width: 100%;                         /* 横幅 */
  height: 100%;                        /* 高さ */
  content: "Click";                    /* 文字列の挿入 */
  transition: background 1.0s;         /* ボタンの色の変化時間 */
  transform: rotateX(-90deg);          /* 横軸で前方に90度回転 */
  transform-origin: 50% 0%;            /* transformの起点 */
  border: 2px solid #000066;;          /* 罫線 */
}
.button2:hover span {
  transform: rotateX(90deg);           /* 横軸で90度回転 */
}
.button2:hover span::before{
  background-color: #000066;;          /* Clickボタンの色 */
  color: #fff;                         /* Clickの文字の色 */
}
</style>

ページTOP

注意事項

CSSの「transform-style」を使用しています。「transform-style」は、古いブラウザや一部ブラウザでは動作しません。

「transform-style」の使い方は以下を参照ください。
transform-style 「要素重なり時の３D表示」

ページTOP

生成できるホームページ・パーツ一覧
	文字のデザイン
	画像のデザイン
	ボタンのデザイン
	入力項目のデザイン
	テーブルのデザイン
	BOXのデザイン
	吹き出しのデザイン
	ページのデザイン
	図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
	何で無料なの？
	生成コードに利用制限はある？
	生成コードに保証はある？
	jQueryで生成できない？