1

私はcss3 3Dページに取り組んでおり、透明なdivを通して影を表示したいのですが、これを機能させることができません...
同じオブジェクトである必要があるため、スパンなどを使用できません。 jquery アニメーションの。

基本的な div スタイリング:

#Div3{
        position:absolute;
        border:1px solid white;
        border-radius:10px;        
        transition: all 1s;
        background:transparent;
        pointer-events: none;
    }

位置 + 影 + 変換の追加クラス:

.P3{
        top:22.5%;
        bottom:25%;
        right:25%;
        height:55%;
        width:20%;
        margin-right:-10%;
        box-shadow:10px 0px 15px rgba(255,255,255,0.6);
        transform: perspective( 1000px ) rotateY( 330deg );
        -webkit-transform: perspective( 1000px ) rotateY( 330deg );
    }

結果:
 背景は透明に設定されていますが、その背後にあるボックスの影は表示されません。

  • box-shadow はオブジェクトの輪郭の影だけを生成しますか?
  • cssで見えるようにする方法はありますか？
4

2 に答える 2

-1

なぜうまくいかないのか正確にはわかりません。例でわかるように、ボックスの影は透明な背景に表示されます。

要素 #Div3 の最初のクラス定義にシャドウを配置してみてください。

.cartContainer{
width:150px;
height:60px;
border-radius:10px;
background:transparent;
float:left;
margin:-10px 0 0 15px;
box-shadow:inset 0 0 5px  #FFFF99, #333 0 0 5px;

}

例:働くフィドル

于 2014-03-18T14:53:57.460 に答える