Güzel bir CSS/transform pratiği olan bu örneği yukarıdaki videoda izleyebilirsiniz. Kodlara da buradan erişebilirsiniz.
Öncelikle HTML elementlerini yazalım. Her yüz için ayrı bir element ve sağ ve sol yüz hariç süreci gösteren birer çocuk element ekleyeceğiz.
Öncelikle bar-wrapper sınıfında bir element oluşturuyoruz. Bu sınıfa perspective stilini vereceğiz ki bu CSS için 3 boyutlu çalışmalarda çok önemli.
Bu elementin içine bar sınıflı bir div elementi daha ekliyoruz. Diğer yüzleri saracak bu elemente de X ekseninde bir dönüş rotateX vererek hafif yukarıdan bakılıyormuş etkisi veriyoruz.
Son olarak bar içine 6 tane face sınıflı element, her birine hangi yüz olduğunu belirten ayrıca bir sınıf ismi veriyoruz. face sınıfına yükseklik ve şeffaflığı olan bir arkaplan rengi veriyoruz. Yüze ait sınıflara ise uygun transform değerlerini veriyoruz.
Son olarak da sağ ve sol yüz hariç diğer 4 yüz elementi içine state sınıflı birer div elementi ekliyoruz ve face ile aynı yüksekliği, bir genişlik ve bir arkaplan rengi verip bitiriyoruz.
Bir cevap yazın