ड्रॉप-छाया और रोटेशन सीएसएस व्यवहार

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>