मैं skewed परत (सीएसएस) में पृष्ठभूमि छवि कैसे unskew?

Question

मैं इस तरह की प्रोफाइल फोटो प्रदर्शित करने की कोशिश कर रहा हूं/-/(स्लेश स्केवएक्स का उपयोग करके स्लेंट का प्रतिनिधित्व करते हैं, हाइफ़न एक क्षैतिज-गठबंधन पृष्ठभूमि छवि का प्रतिनिधित्व करता है)।

.photo { 
transform: skewX(35deg); 
-ms-transform: skewX(35deg); /* IE 9 */ 
-webkit-transform: skewX(35deg); /* Safari and Chrome */ 
width: 100px; 
height: 92px; 
border-right: 1px solid black; 
border-left: 1px solid black; 
background-image: url('silhouette.png'); 
background-repeat: no-repeat; 
background-position: top left; 
} 

... 

<div class="photo"></div> 

मैं पृष्ठभूमि रिवर्स करने की कोशिश की है इस तरह तिरछा:

समस्या

कि इस कोड भी पृष्ठभूमि छवि संबंध रखते है

.photo { 
transform: skewX(35deg); 
-ms-transform: skewX(35deg); /* IE 9 */ 
-webkit-transform: skewX(35deg); /* Safari and Chrome */ 
width: 100px; 
height: 92px; 
border-right: 1px solid black; 
border-left: 1px solid black; 
} 

.photo div { 
transform: skewX(-35deg); 
-ms-transform: skewX(-35deg); /* IE 9 */ 
-webkit-transform: skewX(-35deg); /* Safari and Chrome */ 
width: 100%; 
height: 100%; 
background-image: url('silhouette.png'); 
background-repeat: no-repeat; 
background-position: top left; 
} 

... 

<div class="photo"><div></div></div> 

... लेकिन मैं मिल/[ -]/(पृष्ठभूमि slants के लिए फ्लश फिट नहीं है)।

मैं इस दिन रहा हूं, कृपया आप मेरी मदद कर सकते हैं? मुझे कोडर का झटका मिला है!

Answer 1

मैं पृष्ठभूमि की छवि धारण करने वाले छद्म तत्व का उपयोग करना चाहता हूं। समाधान के लिए महत्वपूर्ण transform-origin उपयोग कर रहा है:

Example

.photo { 
    transform: skewX(35deg); 
    -ms-transform: skewX(35deg); /* IE 9 */ 
    -webkit-transform: skewX(35deg); /* Safari and Chrome */ 
    width: 100px; 
    height: 92px; 
    border-right: 1px solid black; 
    border-left: 1px solid black; 

    /* new styles */ 
    position: relative; 
    overflow: hidden; 
    -webkit-transform-origin: top left; 
    -ms-transform-origin: top left; 
    transform-origin: top left; 
} 

.photo::before { 
    content: ""; 
    transform: skewX(-35deg); 
    -ms-transform: skewX(-35deg); /* IE 9 */ 
    -webkit-transform: skewX(-35deg); /* Safari and Chrome */ 
    background-image: url('http://placekitten.com/200/200'); 
    background-repeat: no-repeat; 
    background-position: top left; 

    /* new styles */ 
    position: absolute; 
    -webkit-transform-origin: top left; 
    -ms-transform-origin: top left; 
    transform-origin: top left; 
    width: 1000%; /* something ridiculously big */ 
    height: 1000%; /* something ridiculously big */ 
}