CSS'de "kapı açma" 3D efekti oluşturmaya çalışıyorum ama bunu yapamıyorum. Sorun, rotateY() işlevinin kullanılması, öğeyi döndürmeyi sağlar. Buradan kontrol edebilirsiniz. http://jsfiddle.net/uC4du/1/Kapı açma 3D efekti CSS'de
"Referans ekseni" döndürme işlemini nasıl değiştireceğinizi biliyor musunuz? Öğeyi sol köşelerini referans olarak döndürmek için ne yapmalıyım?
'Transform-origin' özelliğini (http://www.w3schools.com/cssref/css3_pr_transform-origin.asp) kullanabilirsiniz.
Şunun gibi bir şeye ayarlayın: "-webkit-transform-origin: 0% 50%;" http://jsfiddle.net/aV76H/
Umarım yardımcı olur:
İşte o özellik kullanarak örnektir!
Tam olarak ne demek istediğimi anlamanız için küçük bir güncelleme: http://jsfiddle.net/aV76H/2054/ Orijinal versiyonun üst kısmında garip bir etkisi vardı. simetrik bir versiyon –
Bu çok yardımcı bir cevaptır, ancak Firefox üzerinde çalışmak için bunu değiştirmek için bana doğru yönde işaret eden var mı? – Ryan
Bir seçenek, üst nesnenin iki katı kadar geniş olmasını sağlamaktır. Sonra orta ekseninde dönerken, görünen kısım bir kapı gibi davranıyor gibi görünür. –
@DA Evet Yaptım, ama herşeyi daha da zorlaştıracak :( –
Şuna bir bakın: http://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image- geçişler/tympanus.net/Development/ImageTransitions/index2.html –