css - एसवीजी हॉवर पर छवि भर को घुमाने के लिए



svg hover (1)

पूरे एसवीजी को घूर्णन करने और फिर छवि पर रिवर्स रोटेशन करने की कोशिश करने के बजाय, षट्भुज को घुमाएं। बहुभुज (और इस प्रकार क्लिपपाथ) को घुमाया जाएगा, लेकिन छवि अप्रभावित हो जाएगी।

svg #hex {
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);

    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform: 50% 50%;
}

svg:hover #hex {
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
}

डेमो बेलाल यहाँ

मेरे पास एक एसटीवीएम मुखौटा है जो एक चित्र के साथ होवर पर घड़ी की दिशा में घूमता है अंदर भरें। मैं हॉवर पर आकार के रोटेशन की भरपाई करने के लिए प्रतिद्वंद्वी के अनुसार बारी बारी से चित्र को चित्रित करना चाहता हूं।

मेरा मुद्दा यह है कि तस्वीर को हॉवर के बजाए आकार से बाहर चला जाता है मैंने एक अतिप्रवाह करने की कोशिश की: छिपा हुआ लेकिन यह काम नहीं करता।

यहां मेरा जेएसफिल्ड है: http://jsfiddle.net/nyb5wffv/1/

#hex {
overflow:hidden;
}

svg {
padding: 50px;
width: 200px;
height: 200px;
transition: all 0.25s;
}

svg a {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}

svg:hover{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}

svg:hover a {
-ms-transform: rotate(-7deg); /* IE 9 */
-webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
transform: rotate(-7deg);
}




svg-animate