純粋な css3 変換 3D テキスト反転 3D オープンエフェクト_html/css_WEB-ITnose

詳細については、クリックしてください

今すぐオンライン プレビューをダウンロード

このチュートリアルでは、CSS3 に基づいて興味深い 3D オープン エフェクトを作成します。このチュートリアルの目的は、CSS3 の使用に命を吹き込む方法を示すことです。

html:

• C
  
• J


• 8


• A

css:

.grid li span {
display: inline-block;
font-weight: 900;
line -高さ: 1;
位置: 相対;
カラー: hsla(0, 0%, 0%, 0.6);
変換スタイル:保持 3d;
視点: 550px;
z-index: 1;
}
.grid li spa:before,
.grid li spa:after {
位置:絶対;
内容:attr(データ文字);
行の高さ:継承;
上:0;
左:0;
右: 0;
ボトム: 0;
z-index: 2;
トランジション: すべて 0.3s;
}

.grid li span:before {
text-shadow: none;
color: hsla(0, 0%, 0 %, 0.12);
}
.ot-letter-left スパン:前,
.ot-letter-left スパン:後 {
変換原点: 0 50%;
}
.ot-letter-left スパン:前{
変換:scale(1.08, 1) skew(0deg, 1deg);
}

.ot-letter-left span:after {
text-shadow:
-1px 0px 0px hsla(360, 100%, 100% , 0.1),
3px 0px 1px hsla(0, 0%, 0%, 0.4);
transform:rotateY(-15deg);
}
.ot-letter-left:hover span:before {
transform:scale( 0.85,1) skew(0deg,20deg);
}

.ot-letter-left:hover span:after {
変換: 回転 Y(-40 度);
}
.ot-letter-left {
背景: # e74d3c;
}

.ot-letter-left スパン {
text-shadow:
1px 4px 6px #e74d3c,
0 0 0 hsla(0, 0%, 0%, 0.3),
1px 4px 6px #e74d3c;
}

.ot-letter-left スパン:after {
color: #e74d3c;
}

.ot-letter-left:hover scan:after {
color: #ea6253; left {
背景: #e74d3c;
}

.ot-letter-left スパン {

text-shadow:

1px 4px 6px #e74d3c,
0 0 0 hsla(0, 0%, 0%, 0.3),
1px 4px 6px #e74d3c;
}

color: #e74d3c;

color: #ea6253;
.ot-letter-bottom スパン:前,
.ot-letter-bottom スパン:後 {

変換原点: 50% 0;

}

.ot-letter-bottom スパン:前 {
変換: スケール( 1,1.05) skew(4deg,0deg);
}

.ot-letter-bottom scan:after {

text-shadow:

0px -1px 0px hsla(360, 100%, 100%, 0.1),
0px 3px 1px hsla(0, 0%, 0%, 0.4);
変換: 回転 X(15 度);

}

.ot-letter-bottom:hover span:before {
変換: 変換 Y(-0.035em) スケール( 1,1.2) skew(10deg,0deg);
}

.ot-letter-bottom:hover span:after {

transform:translateY(0.045em)rotateX(40deg);

}

オンラインプレビューを今すぐダウンロード

学習ソース: http://tympanus.net/Tutorials/AnimatedopeningType/

htnl5/css3 コンテンツの詳細については、

をクリックしてください。