CSS3 は反転可能なホバー効果を実現します

CSS3 は反転可能なホバー効果を実装します。具体的なコードは次のとおりです。

1.css

/*基本スタイル*/  
html{  
    フォントファミリー: サンセリフ;  
    -ms-テキストサイズ調整: 100%;  
    -webkit-テキストサイズ調整: 100%;  
}  
体 {  
    マージン: 0 自動;  
    テキスト配置: 中央;  
    背景色: #FFFFCC;  
}  
ul {  
    リストスタイル: なし;  
    フロート: 左;  
    マージン: 0;  
    パディング: 0;  
}  
{  
    カーソル: ポインタ;  
}  
div {  
    表示: インラインブロック;  
    マージン: 40px;  
}  
ul li {  
    幅: 200ピクセル;  
    高さ: 40px;  
    行の高さ: 40px;  
    テキスト配置: 中央;  
    マージン: 10px;  
    背景色: #747474;  
    境界線の半径: 4px;  
    色: 白;  
}  
ブロック解除{  
    表示: ブロック;  
}  
/*#nav1 マウスホバー効果が前後に反転します*/  
#nav1 ul li {  
    変換スタイル: 3D を保持します。  
    -webkit-transform-style: 3d を保存します。  
    -ms-transform-style: 3d を保持します。  
    -moz-transform-style: 3d を保存します。  
    遷移: 0.5秒;  
    -webkit-transition: 0.5秒;  
    -ms遷移: 0.5秒;  
    -moz-transition: 0.5秒;  
}  
#nav1 ul li:hover {  
    変換: translateZ(30px) rotateX(360deg) scale(1.1);  
    -webkit-transform: translateZ(30px) rotateX(360deg) scale(1.1);  
    -ms-transform: translateZ(30px) rotateX(360deg) scale(1.1);  
    -moz-transform: translateZ(30px) rotateX(360deg) scale(1.1);  
}  
/*#nav2 マウスホバー効果が浮かび上がる*/  
#nav2 ul li {  
    変換スタイル: 3D を保持します。  
    -webkit-transform-style: 3d を保存します。  
    -ms-transform-style: 3d を保持します。  
    -moz-transform-style: 3d を保存します。  
    遷移: 0.5秒;  
    -webkit-transition: 0.5秒;  
    -ms遷移: 0.5秒;  
    -moz-transition: 0.5秒;  
}  
#nav2 ul li:hover {  
    変換: translateZ(30px) スケール(1.1);  
    -webkit-transform: translateZ(30px) スケール(1.1);  
    -ms-transform: translateZ(30px) スケール(1.1);  
    -moz-transform: translateZ(30px) スケール(1.1);  
}  
/*#nav4 マウスホバー効果が下に浮かび上がります*/  
#nav4 ul li {  
    変換スタイル: 3D を保持します。  
    -webkit-transform-style: 3d を保存します。  
    -ms-transform-style: 3d を保持します。  
    -moz-transform-style: 3d を保存します。  
    遷移: 0.5秒;  
    -webkit-transition: 0.5秒;  
    -ms遷移: 0.5秒;  
    -moz-transition: 0.5秒;  
}  
#nav4 ul li:hover {  
    変換: translateZ(30px) スケール(0.9);  
    -webkit-transform: translateZ(30px) スケール(0.9);  
    -ms-transform: translateZ(30px) スケール(0.9);  
    -moz-transform: translateZ(30px) スケール(0.9);  
}  
/*#nav3 マウスホバー効果が左右に反転します*/  
#nav3 ul li {  
    変換スタイル: 3D を保持します。  
    -webkit-transform-style: 3d を保存します。  
    -ms-transform-style: 3d を保持します。  
    -moz-transform-style: 3d を保存します。  
    遷移: 0.5秒;  
    -webkit-transition: 0.5秒;  
    -ms遷移: 0.5秒;  
    -moz-transition: 0.5秒;  
}  
#nav3 ul li:hover {  
    変換: translateZ(30px) rotateY(360deg) scale(1.1);  
    -webkit-transform: translateZ(30px) rotateY(360deg) scale(1.1);  
    -ms-transform: translateZ(30px) rotateY(360deg) scale(1.1);  
    -moz-transform: translateZ(30px) rotateY(360deg) scale(1.1);  
}  
/*button1 ホバー効果*/  
btn1 {  
    背景色: #1AAB8A;  
    色: 白;  
    フォントサイズ: 18px;  
    高さ: 60px;  
    幅: 150ピクセル;  
    境界線: 0;  
    遷移: 800ms すべてを緩和;  
    アウトライン: なし;  
    位置: 相対的;  
}  
btn1:ホバー{  
    背景: #fff;  
    色: #1AAB8A;  
}  
btn1:前、.btn1:後{  
    コンテンツ： '';  
    位置: 絶対;  
    高さ: 2px;  
    幅: 0;  
    背景: #1AAB8A;  
    遷移: 400ms すべてを緩和;  
}  
btn1:前{  
    右: 0;  
    上: 0;  
}  
btn1:後{  
    左: 0;  
    下部: 0;  
}  
btn1:hover:before、.btn1:hover:after {  
    幅: 100%;  
    遷移: 800ms すべてを緩和;  
}

2.html

<div id="nav1">  
            <p>表と裏を反転します</p>  
            <ul>  
                <li>  
                    <a>ホーム</a>  
                </li>  
                <li>  
                    <a>js</a>  
                </li>  
                <li>  
                    <a>jQuery</a>  
                </li>  
                <li>  
                    <a>div+css</a>  
                </li>  
                <li>  
                    <a>css3</a>  
                </li>  
            </ul>  
        </div>  
        <div id="nav2">  
            <p>フローティング</p>  
            <ul>  
                <li>  
                    <a>ホーム</a>  
                </li>  
                <li>  
                    <a>js</a>  
                </li>  
                <li>  
                    <a>jQuery</a>  
                </li>  
                <li>  
                    <a>div+css</a>  
                </li>  
                <li>  
                    <a>css3</a>  
                </li>  
            </ul>  
        </div>  
        <div id="nav4">  
            <p>浮かんで落ちる</p>  
            <ul>  
                <li>  
                    <a>ホーム</a>  
                </li>  
                <li>  
                    <a>js</a>  
                </li>  
                <li>  
                    <a>jQuery</a>  
                </li>  
                <li>  
                    <a>div+css</a>  
                </li>  
                <li>  
                    <a>css3</a>  
                </li>  
            </ul>  
        </div>  
        <div id="nav3">  
            <p>左右反転</p>  
            <ul>  
                <li>  
                    <a>ホーム</a>  
                </li>  
                <li>  
                    <a>js</a>  
                </li>  
                <li>  
                    <a>jQuery</a>  
                </li>  
                <li>  
                    <a>div+css</a>  
                </li>  
                <li>  
                    <a>css3</a>  
                </li>  
            </ul>  
        </div>  
        <div class="dis-block">  
            <p>ボタンのホバー効果</p>  
            <button class="btn1" type="button">ホバー!</button>  
        </div>

効果：