ドロップシャドウや回転CSSの挙動は

Question

何かが間違っていますあなた自身のために

それはクロムで起こったことに注意してください。

なぜこのようなことが起こりますか？これをどうして防ぐことができますか？

url to follow

.wrap1, 
 
.wrap2 { 
 
    position: absolute; 
 
    top: 20%; 
 
    height: 40%; 
 
    width: 40% 
 
} 
 
.wrap1 { 
 
    -webkit-filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px); 
 
    -webkit-transform: rotate(5.696863186209043deg); 
 
    filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px); 
 
    transform: rotate(5.696863186209043deg); 
 
    left: 0; 
 
} 
 
.wrap2 { 
 
    -webkit-filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px); 
 
    -webkit-transform: rotate(0deg); 
 
    filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px); 
 
    transform: rotate(0deg); 
 
    left: 50%; 
 
} 
 
.inner, 
 
.inner_color { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    overflow: hidden; 
 
} 
 
.inner img { 
 
    width: 100%; 
 
} 
 
.inner_color { 
 
    background-color: blue; 
 
}

<div class="wrap1"> 
 
    <div class="inner_color"></div> 
 
    <div class="inner"> 
 
    <img src="http://www.facegift.co.il/PrivateData/Images/15152/1515293_M.jpg"> 
 
    </div> 
 
</div> 
 

 
<div class="wrap2"> 
 
    <div class="inner_color"></div> 
 
    <div class="inner"> 
 
    <img src="http://www.facegift.co.il/PrivateData/Images/15152/1515293_M.jpg"> 
 
    </div> 
 
</div>

Answer 1

クロム（安定版）の現在のリリースのバグであると思われます。あなたは、実行中のコードをせん断することができ

.wrap1, 
 
.wrap2 { 
 
    position: absolute; 
 
    top: 20%; 
 
    height: 40%; 
 
    width: 40% 
 
} 
 
.wrap1 { 
 
    -webkit-filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px); 
 
    filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px); 
 
    left: 0; 
 
} 
 

 
/* the transform is applied to descendats of the wrap1 instead */ 
 
.wrap1 div { 
 
    transform: rotate(5.696863186209043deg); 
 
} 
 

 
.wrap2 { 
 
    -webkit-filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px); 
 
    -webkit-transform: rotate(0deg); 
 
    filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px); 
 
    transform: rotate(0deg); 
 
    left: 50%; 
 
} 
 
.inner, 
 
.inner_color { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    overflow: hidden; 
 
} 
 
.inner img { 
 
    width: 100%; 
 
} 
 
.inner_color { 
 
    background-color: blue; 
 
}

<div class="wrap1"> 
 
    <div class="inner_color"></div> 
 
    <div class="inner"> 
 
    <img src="http://www.facegift.co.il/PrivateData/Images/15152/1515293_M.jpg"> 
 
    </div> 
 
</div> 
 

 
<div class="wrap2"> 
 
    <div class="inner_color"></div> 
 
    <div class="inner"> 
 
    <img src="http://www.facegift.co.il/PrivateData/Images/15152/1515293_M.jpg"> 
 
    </div> 
 
</div>