2

通知システムを作っています。この通知は、画面の上部が立方体のように回転する iOS の一部の通知のように、回転するボックスのように表示されます。

これで、立方体の前面と背面が透明になり、背景と同じ色になります。回転すると、ボックスにランプが輝いているかのように、ビューアーの正面と平行でない側面に影が落ちるはずです。これはできますか？

より明確にするために：ボックスの表と裏は背景色と同じであるため、ボックスを回転させると、ボックスが回転しているようには見えず、所定の位置に回転する紙のスライスのように見えます. だから私が望むのは、視聴者とは対照的に、立方体の面が角度に応じて影になることです。

たとえば、前面 (背景色と同じ色であるため実際には見えません) を 1 度回転させると、少し暗く/明るくなるはずです。別の程度、もう少し。そのため、顔の真の色は、ユーザーに直接平行になっている場合にのみ表示されます。これにより、紙切れではなく、箱があるような錯覚が生まれます。

キューブでこのチュートリアルを使用しています: http://desandro.github.io/3dtransforms/docs/cube.html

ここにフィドルがあります：http://jsfiddle.net/BqJMW/3/

もう 1 つの問題は、私の言いたいことがわかっている場合、現在、テキストが少し引き伸ばされているように見えることです。通常、 のtransform: translateZ(-25px);(以下のコードを参照) で#cubeこれを解決できますが、それでもバランスが悪いようです。

CSS

body {
    background: #ebebeb;
}
.container {
    width: 200px;
    height: 50px;
    position: relative;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
#cube {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;
    -webkit-transform: translateZ(-25px);
    transform: tranlateZ(-25px);
}
#cube figure {
    margin:0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#cube .front {
    background: transparant;
    -webkit-transform: translateZ(25px);
    transform: translateZ(25px);
}
#cube .top {
    background: green;
    -webkit-transform: rotateX(-90deg) translateZ(25px);
    transform: rotateX(-90deg);
}
#cube .back {
    background: transparant;
    -webkit-transform: rotateX(180deg) translateZ(25px);
    transform: rotate(180deg);
}
#cube.show-front {
    -webkit-transform:translateZ(-25px);
    tranform: translateZ(-25px);
}
#cube.show-top {
    -webkit-transform: translateZ(-25px);
    transform: translateZ(-25px);
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
}
#cube.show-back {
    -webkit-transform: translateZ(-25px);
    transform: translateZ(-25px);
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

HTML

<section class="container">
  <div id="cube">
    <figure class="front">Front</figure>
    <figure class="top">Your notification</figure>
    <figure class="back">Back</figure>
  </div>
</section>
4

1 に答える 1

2

通知面の最初の色を最終的な色の暗いバージョンに設定することで、その面の属性にCSS3 トランジションcolorを使用して、面が回転するにつれて明るい色にアニメーション化できます。

通知面に追加/通知面から削除される明るい「緑」の新しいクラスを追加し、イニシャルを変更しcolorて新しいトランジションを に追加しました#cube .top。

また、CSS のいくつかのタイプミス ( tranform→ transform、transparant→ ) を修正し、同じクラスでオーバーライドされているため、クラスからtransparent重複-webkit-transform:translateZ(-25px);したプレフィックスのないバージョンを削除しました。.show-front|top|back

最後に、通知面はビューアに向かって翻訳される25pxため、テキストがぼやけて見えます (Chrome では)。これは、を削除することで解消されるよう-webkit-perspective: 1000px;です。削除する場合はお任せします。

デモまたは次のコードを参照してください。

CSS

body {
    background: #ebebeb;
}
.container {
    width: 200px;
    height: 50px;
    position: relative;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
#cube {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;
    -webkit-transform: translateZ(-25px);
    transform: translateZ(-25px);
}
#cube figure {
    margin:0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#cube .front {
    background: transparent;
    -webkit-transform: translateZ(25px);
    transform: translateZ(25px);
}
#cube .top{
    background-color:darkgreen;
    -webkit-transform: rotateX(-90deg) translateZ(25px);
    transform: rotateX(-90deg);
    -webkit-transition:background-color .5s;
}
#cube .top.show {
    background-color:green;
}
#cube .back {
    background: transparent;
    -webkit-transform: rotateX( 180deg ) translateZ(25px);
    transform: rotate(180deg);
}
#cube.show-front{
}
#cube.show-top {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
}
#cube.show-back {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

JavaScript

$('.showfront').click(function () {
    $('.top').removeClass('show');
    $('#cube').removeClass().addClass('show-front');
});
$('.showtop').click(function () {
    $('.top').addClass('show');
    $('#cube').removeClass().addClass('show-top');
});
$('.showback').click(function(){
    $('.top').removeClass('show');
    $('#cube').removeClass().addClass('show-back');
});
于 2013-08-01T10:55:13.203 に答える