CSS 3はリバースカード効果を実現します.

6300 ワード
html css
今日は仕事の中で需要があって、CSS 3でカードの反転効果を書く必要があります.この効果は簡単に見えますが、一般的ではないCSS 3の3 D変換の属性とその効果を実現する考え方についてまとめてみます.
原文のリンク:http://mrzhang123.github.io/2016/08/17/FlipCards/
プロジェクトの住所:https://github.com/MrZhang123/Practice/tree/master/FlipCards
必要なCSS 3属性
perspective
現在のブラウザはすべてperspective属性をサポートしていません.
chromeおよびSafariでは-webkit-perspectiveが必要であり、Firefoxでは-moz-perspectiveが必要である.
定義と用法perspective属性は、3 D要素のビューからの距離をピクセル計で定義する.この属性は、3 D要素の表示を変更することができます.要素として定義する場合perspective属の場合、そのサブ要素は要素自体ではなく、透視効果を得ます.つまり、この要素を設定するのは、その要素のサブ要素を与えるためです.
値
number:元素距離ビューの距離は、ピクセルで計算します.
none:デフォルトは0と同じです.透視をセットしない
transform-style
Firefoxはtransfrom-style属性をサポートしています.
Chrome、Safari、およびOperaは代替-webkit-transform-style属性をサポートしています.
定義と用法transform-style属性は、3 D空間にネストされた要素がどのように提示されるかを固定する.一般的に親要素に設定されていますが、そのサブ要素は親要素と一緒に位置して移動します.一般的に設定されます.
値
flat:サブ要素はその3 D位置を保持しません(デフォルト値)
perserve-3 d:サブ要素はその3 D位置を保持します.
トランジスト
IE 10+、Firefox、Opera、Chromeは、transition属性をサポートしています.Safariは代替-webkit-transition属性をサポートしています.ただし、IE 9-はこの属性をサポートしていません.
定義と用法transition属性は、4つの遷移属性を設定するための簡略属性である.
  • transiton-property:遷移効果を設定するCSS属性の名称
    • を規定する.
  • trnsiton-duration:移行効果の完了には何秒かまたはミリ秒が必要ですか?
  • trnsiton-timing-funciton:速度効果を規定する速度曲線
  • トランジストn-delay:移行効果はいつから始まりますか?
    • transiton-durationは設定しなければなりません.そうでないと、長さは0です.遷移効果はありません.
    backface-visibility
    IE 10＋及びFirefoxのみがbackface-visibilityをサポートし、Opera 15＋、Safari及びChromeは代替-webkit-backface-visibilityをサポートする.
    定義と用法backface-visibility属性は、現在の要素がスクリーンに向かっていないときに見えるかどうかを定義し、要素が回転した後に裏面を見たくない場合に使用することができる.
    visible:背面が見える(デフォルト)
    hidden:裏側は見えません.
    実現する考え
    このようなカードのめくり効果を実現するには、まず私達はひっくり返すことができるカードが必要です.このカードは二つの要素が重なって構成されています.上層の正面に位置していますが、下の階の裏側に位置しています.見えません.そして、自分はY軸の周りを回転しています.このようにマウスが移動した後、表と裏を回転させながらめくり効果を実現できます.
    実現する
    基本構造コードは以下の通りです.
    
    

    ul,li {
    margin:0;
    padding:0;
    list-style:none;
}
#content ul li{
    width: 225px;
    height: 180px;
}
#content ul li a{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
#content ul li a > div{
    position: absolute;
    left: 0;
    height: 0;
    width: 100%;
    height: 100%;
    color: #fff;
}
#content ul li a div:first-child{
    background-color: rgb(255, 64, 129);
    z-index:2;
}
#content ul li a div:last-child{
    background:rgb(0, 188, 212);
    z-index:1;
}
#content ul li a div h3{
    margin: 0 auto 15px;
    padding: 15px 0;
    width: 200px;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    text-align: center;
    border-bottom: 1px #fff dashed;
}

#content ul li a div p{
    padding: 0 10px;
    font-size: 12px;
    text-indent: 2em;
    line-height: 18px;
}
    このように二つのdivを重ねましたが、反転を行うには、まず背面自体をひっくり返す必要があります.マウスを上に置いて反転させると、私達に見られます.だから、背面に180°の属性を追加して、マウスを上に置いてから0°に反転させます.同時に、各ブラウザの統一を保証するために、正面に0°を反転させます.マウスを上に移動したら反転します.180°はアニメーションですので、遷移を追加します.正面の背面にCSSを追加します.
    #content ul li a > div{
    -webkit-transition:.8s ease-in-out;
    -moz-transition:.8s ease-in-out;
}
#content ul li a div:first-child{
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
}
#content ul li a div:last-child{
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
}
#content ul li a:hover div:first-child{
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
}
#content ul li a:hover div:last-child{
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
}
    これらのCSS 3属性を追加すると、反転が実現されますが、表面だけが見え、裏面が見えないのはなぜかというと、前に述べたように、属性backface-visibilityがあります.この属性は反転後に元素の背面が見えるかどうかを制御するために使われています.私たちは手動で元素の反転を設定したいです.背面が見えないので、設定が必要です.
    #content ul li a > div{
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
}
    このように設定した後、正面の元素は反転した後で裏側が見えないため、裏側の元素が見えます.
    しかし、よく見ると、この反転はそんなに立体的ではないようで、2つの平行線の間で反転が実現されたようです.だから、観察点距離ビューの距離を設定したいです.この場合、親要素にperspective属性を追加する必要があります.この属性の値は普通800 px～1000 pxで、この範囲の値は合理的に見えます.親要素を追加します.
    #content ul li a{
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
}
    これで反転カードの効果を実現しましたが、ここで問題を解決する必要があります.perspective属性はIEによってサポートされていないので、降格する必要があります.直接に隠し表示をする方法です.では、IE 9＋ブラウザはどうやって識別しますか?stackover flowで答えを見つけました.
    添付:CSSで各種IEを識別する方法
    IE 6
    * html .ie6{
    property:value;
}
    or
    html .ie6{
    _property:value;
}
    IE 7
    *+html .ie7{
    property:value;
}
    or
    *:first-child+html ie7{
    property:value;
}
    IE 6 and IE 7
    @media screen\9{
    ie67{property:value;}
}
    or
    .ie67{ *property:value;}
    or
    .ie67{ #property:value;}
    IE 6,7 and 8
    @media \0screen\,screen\9{
    ie678{property:value;}
}
    IE 8
    html>/**/body .ie8{property:value;}
    or
    @media \0screen{
    ie8{property:value;}
}
    IE 8標準モードのみ
    .ie8{property/*\**/:value\9;}
    IE 8,9 and 10
    @media screen\0{
    ie8910{property:value;}
}
    IE 9 only
    @media screen and (min-width:0\0) and (min-resolution: .001dpcm){
    /*IE9 CSS*/
    .ie9{property:value;}
}
    IE 9+
    @media screen and (min-width:0\0) and (min-resolution: +72dpi){
    /*IE9+ CSS*/
    .ie9up{property:value;}
}
    IE 9 and 10
    @media screen and (min-width:0){
    .ie910{property:value;}
}
    IE 10 only
    _:-ms-lang(x), ie10 {property:value;}
    IE 10+
    _:-ms-lang(x), ie10up{property:value;}
    or
    @media all and (-ms-high-contrast:none),(-ms-high-contrast:active){
    .ie10up{property:value;}
}
    IE 11+
    _:-ms-fullscreen, :root .ie11up{property:value;}
    javaScript対象向け開発例