くるっと回転(奥に回転)

ボタン
-くるっと回転(奥に回転)-

デモページを見る

See the Pen 7-1-10 くるっと回転(奥に回転) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内のボタンにカーソルをあわせて動きを確かめてね!

動きを実現する仕組み

CSS のtransform-style: preserve-3d; を使って3D 表示を行う。
rotate を使ってHTML 内の2 つのspan をX 軸に回転させる。

HTMLの書き方

  1. head終了タグ直前に自作のCSSを読み込みます。
    <link rel="stylesheet" type="text/css" href="css/7-1-10.css">
    </head>
  2. body内のボタンを表示させたい場所に以下のHTMLを記載します。
    <a href="#" class="btn02 rotateback"><span>7-1-10 くるっと回転(奥に)</span><span>回転後(奥に)</span></a>

自作のCSS内の書き方


/*== ボタン共通設定 */
.btn02 {
    /*背景の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display: inline-block;
    width:100%;
    max-width: 250px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    outline: none;
}

/*ボタン内側の設定*/
.btn02 span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #333;
    /* 重なりを3Dで表示 */
    transform-style: preserve-3d;
    /* アニメーションの設定 数字が少なくなるほど早く回転 */
    transition: 0.5s;
}

/*== くるっと回転(奥に) */

/* 回転前 */
.rotateback span:nth-child(1) {
    background: #fff;
    color: #000;
    transform: rotateX(0deg);/*はじめは回転なし*/
    transform-origin: 0 50%  -25px;/* 回転する起点 */
}

/*hoverをした後の形状*/
.rotateback:hover span:nth-child(1) {
    transform: rotateX(90deg);/* X軸に90度回転 */
}

/* 回転後 */
.rotateback span:nth-child(2) {
    background: #000;
    color: #fff;
    transform: rotateX(-90deg);/*はじめはX軸に-90度回転*/
    transform-origin: 0 50%  -25px;/* 回転する起点 */
}

/*hoverをした後の形状*/
.rotateback:hover span:nth-child(2) {
    transform: rotateX(0deg);/* X軸に0度回転 */
}

バリエーション
を見る

「機能」に関わる
動き一覧

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル

出版社:ソシム株式会社
2021/2/27 発売

書籍紙面サンプル

出版社:ソシム株式会社
2021/7/31 発売

Page
Top