İki farklı görüntüyü çevirme ve üzerine gelmeyi durdurma

Buradaki fikir, her seferinde dönen bir kartın iki tarafını gösterecek ve animasyonu durgunlukta durduracak, yalnızca ön tarafı ortaya çıkaracak ve boyutu 20 arttıracak CSS üzerinde sonsuz bir animasyon oluşturmaktır. Başka bir bölüme bağlantı ile%.İki farklı görüntüyü çevirme ve üzerine gelmeyi durdurma

Vurguluda ikinci resme geçebilir ve büyüyebilirim, ancak bir Keyframe animasyonundaki eylemi değiştiremiyorum.

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.panel { 
    width: 300px; 
    height: 300px; 
    margin: auto; 
    position: relative; 
} 
.card { 
    width: 100%; 
    height: 100%; 
    -o-transition: all .5s; 
    -ms-transition: all .5s; 
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    transition: all .5s; 
    -webkit-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    -webkit-animation: CardFlip 5s infinite; 
} 
.front { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 2; 
    background-image: url('http://placehold.it/300x300/red'); 

} 
.back { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
    -webkit-transform: rotateY(-180deg); 
    -ms-transform: rotateY(-180deg); 
    -moz-transform: rotateY(-180deg); 
    transform: rotateY(-180deg); 
    background-image: url('http://placehold.it/300x300/blue'); 

} 
.panel:hover .front { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
    -webkit-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 
.panel:hover .back { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 2; 
    -webkit-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
    -webkit-transform: scale(1.2,1.2); 
    -ms-transform: scale(1.2,1.2); 
    -moz-transform: scale(1.2,1.2); 
    transform: scale(1.2,1.2); 
} 

@-webkit-keyframes CardFlip { 
    0% { 
position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 2; 
    -webkit-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
    -webkit-transform: scale(1.2,1.2); 
    -ms-transform: scale(1.2,1.2); 
    -moz-transform: scale(1.2,1.2); 
    transform: scale(1.2,1.2); 
    } 
    100% { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
    -webkit-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    } 
} 
</style> 
</head> 
<body> 
<br>   
<br>  
<div class="panel"> 
    <div class="front card"> 
    </div> 
    <div class="back card"> 
    </div> 
</div> 
</body>

kaynak

2014-07-09 JFD

'z-index' özelliği, 'position' özelliğini de dahil etmedikçe selektörlere uygulanmayacaktır. – TylerH

(Yanıtladığınız için teşekkür ederiz) Konum özelliğini şu şekilde ayarlayarak: pozisyon: mutlak; üst: 0px; left: 0px; Bunu değiştirmem gerekiyor mu? – JFD

Tüm demek, 'z-index' değer beyanlarını içeren birkaç seçiciniz var. Bu seçmenlerin de, ** hepsi ** 'z-endeksi' nin çalışabilmesi için 'bir konum' beyanı, 'göreli', 'mutlak' ya da 'sabit' olup olmadığı gerekir. – TylerH

Senin sadece ön kartına backface-visibility: hidden; eklemem gerekiyor düşünüyorum:

Bu defa ne var.

Animasyonunuza sonsuz bir görünüme sahip olmanız gerekiyorsa, benzer% 0 ve% 100 puanlara sahip olmanız gerekir.

Ayrıca, transform-style: preserve-3d; özelliğini kaçırdınız.

Ayrıca, kartların animasyonunu önlemek için bir tane daha kap ekledim. Bence daha semantik.

Kontrol dışarı bu keman: Biz ana kaba perspective: 1000 eklerseniz http://jsfiddle.net/nikoloza/2zrk7/

Güncelleme

, gerçek 3d efekti elde edersiniz. Fiddle: http://jsfiddle.net/nikoloza/2zrk7/1/

Güncelleme 2

Ve sadece soldan sağa saygısız gerekiyorsa biz animasyon% 100 noktası haline 360deg yerine 0deg ayarlayabilirsiniz. Fiddle: http://jsfiddle.net/nikoloza/2zrk7/2/

kaynak

2014-07-16 01:29:51 nikoloza

Çok teşekkür ederim! Güncelleme 2 ile gideceğim! Şimdi, yalnızca önden gösterme yerine, her bir görüntünün boyutunu ekranda göstermeyi ve artırmayı deneyeceğim. Yani, ön tarafı göstermek için ön tarafa gelirsem ve arka taraftaki fareyi geri ... Yardımlarınız için teşekkür ederiz. Guys, harikasınız! – JFD

Ah, tamam. Bununla bir sorun çıkarırsan haberim olsun. – nikoloza

Bu çalışmayı IExplorer veya Firefox üzerinde yapamam, herhangi bir fikrin var mı? – JFD

İki farklı görüntüyü çevirme ve üzerine gelmeyi durdurma

cevap

İlgili konular