nasıl döndürmek veya çevirmek sağlar CSS

The ile + Flip eleman dönüşümü mülkiyet döndürmek için, ancak ikisini aynı anda nasıl yapabilirim? Bir elemanı 90 derece döndürmek ve yatay olarak çevirmek mi istediğimi söyle Her ikisi de aynı mülk ile yapılır, bu yüzden ikincisi eskiyi üzerine yazar. İşte kolaylık için bir örnek keman var:nasıl döndürmek veya çevirmek sağlar CSS

http://jsfiddle.net/DtNh6/

transform: rotate(90deg); 
transform: scaleX(-1);

kaynak

2013-06-10 chinabuffet

Ben jsfiddle kurcaladı ve bu çalıştı:

$('#photo').css('transform', 'rotate(90deg) scaleX(-1)');

Sorunuzun ilişkilendirmek için, ortaya çıkan CSS gelecek nesillere için

transform: rotate(90deg) scaleX(-1);

kaynak

2013-06-10 00:43:19

Tarayıcılar arasında da destekleniyorsa bir fikriniz var mı? Teşekkürler! kimse bilemez "tarayıcılar tarafından desteklenen" nasıl iyi "spec" haritalar, ama şimdiye kadar ben güvenmek istiyorum olarak (düşünmek kullanmadan emin olurdum - – chinabuffet

boşlukla ayrılmış özellikler biraz spec olduğunu tüm dönüşümleri uygulayan tarayıcılar) –

Onunla aynı şeyi nasıl yanıtladım ve cevabını işaretlediniz. –

özellikleri şöyle, boşluklarla ayrılmış olabilir.

transform: rotate(90deg) scaleX(-1);

kaynak

2013-06-10 00:41:53

sayesinde upvoted becau se Birden çok kabul edemiyorum: P – chinabuffet

gibi daha tam cevap arar :

.rotate2{ /*leaning left <- */ 
    -webkit-transform:rotate(270deg); 
    -moz-transform:rotate(270deg); 
    -o-transform:rotate(270deg); 
    -ms-transform:rotate(270deg); 
    transform:rotate(270deg); 
} 
.rotate4{ /*upside down*/ 
    -webkit-transform:rotate(180deg); 
    -moz-transform:rotate(180deg); 
    -o-transform:rotate(180deg); 
    -ms-transform:rotate(180deg); 
    transform:rotate(180deg); 
} 
.rotate6{ /*leaning right -> */ 
    -webkit-transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
    -o-transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    transform:rotate(90deg); 
} 
.rotate8{ /*vertical flip*/ /*upside-down mirror*/ 
    -moz-transform: scale(1, -1); 
    -webkit-transform: scale(1, -1); 
    -o-transform: scale(1, -1); 
    -ms-transform: scale(1, -1); 
    transform: scale(1, -1); 
} 
.rotate10{ /*vertical flip*/ /*upside-down*/ 
    -moz-transform: rotate(90deg) scale(1, -1); 
    -webkit-transform: rotate(90deg) scale(1, -1); 
    -o-transform: rotate(90deg) scale(1, -1); 
    -ms-transform: rotate(90deg) scale(1, -1); 
    transform: rotate(90deg) scale(1, -1); 
} 
.rotate12{ /*horizontal flip*/ /*left-right mirror*/ 
    -moz-transform: scale(-1, 1); 
    -webkit-transform: scale(-1, 1); 
    -o-transform: scale(-1, 1); 
    -ms-transform: scale(-1, 1); 
    transform: scale(-1, 1); 
} 
.rotate14{ /*horizontal flip*/ /*left-right mirror*/ 
    -moz-transform: rotate(90deg) scale(-1, 1); 
    -webkit-transform: rotate(90deg) scale(-1, 1); 
    -o-transform: rotate(90deg) scale(-1, 1); 
    -ms-transform: rotate(90deg) scale(-1, 1); 
    transform: rotate(90deg) scale(-1, 1); 
}

kaynak

2016-06-26 16:50:16

nasıl döndürmek veya çevirmek sağlar CSS

cevap

İlgili konular