Css Transform не работает правильно

Так что я пытаюсь сделать это преобразование типографии. У меня письмо белое. Когда я наводил указатель мыши сверху, верхняя половина буквы должна переворачиваться, выставляя другой цвет. Проблема в том, что он перевернулся неправильно div.Css Transform не работает правильно

tback является нижней частью буквы А. tfront является верхней частью буквы А.

HTML код:

<div id="letter-container" class="letter-container"> 
    <h2><a href="#"> 
    <div class="twrap"> 

     <div class="tup"> 
      <div class="tback"><span>A</span></div> 
      <div class="tfront"><span>A</span></div> 

     </div> 
     <div class="tbg"><span>A</span></div> 
     <div class="tdown"><span>A</span></div> 
    </div></a></h2> 
</div>

ВОТ CSS:

.letter-container h2 .twrap{ 
    position: relative; 
    display: inline-block; 
    width: 100px; 
    height: 120px; 
    line-height: 120px; 
    font-size: 120px; 


    box-shadow: 1px 1px 4px #000; 
} 
.letter-container h2 .tbg{ 
    background: #121212; 
    position: absolute; 
    color: #f2c200; 
    width: 100%; 
    height: 100%; 
    z-index: -10; 
    box-shadow: 0px 1px 3px rgba(0,0,0,0.9); 
} 
.letter-container h2 .tdown{ 
    height: 50%; 
    top: 50%; 
    width: 100%; 
    position: absolute; 
    overflow: hidden; 
    z-index: 1; 
    background: #151515; 
    color: white; 

    box-shadow: 0px 1px 3px rgba(0,0,0,0.9); 
    transition: all 0.3s linear; 
} 
.letter-container h2 .tdown span, 
.letter-container h2 .tup .tback span{ 
    display: block; 
    margin-top:-60px; 

} 
.letter-container h2 .tup{ 
    height: 50%; 
    width: 100%; 
    position: absolute; 
    z-index: 10; 
    -webkit-transform-origin: 50% 100%; 
    transition: all 0.3s linear; 
    color: white; 
    box-shadow: 0px 1px 3px rgba(0,0,0,0.9); 
} 

.letter-container h2 .tup .tfront{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    overflow: hidden; 

    background: #151515; 


    } 

/*Drop down part*/ 
.letter-container h2 .tup .tback{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    overflow: hidden; 

    background: #151515; 

    color: #f2c200; 

    } 
.letter-container h2 .tup .tdown{ 
    background: red; 
    color: red; 

} 
.letter-container h2 .tup .tback{ 
    -webkit-transform: rotateX(180deg); 
} 
.letter-container h2 a .twrap:hover .tup { 

    -webkit-transform: rotateX(180deg); 

}

Здесь представляет собой JSFiddle, показывающий проблему:

http://jsfiddle.net/g4zja/

источник

2014-03-22 CFleming

При наведении курсора мыши вы должны изменить цвет верхней части с покадровой анимацией, или что-то еще? .. –

Вы видите, как верхняя часть A сбрасывается. Его, потому что это .tfront, мне нужен .tback, чтобы свернуть. Но я не могу css указать это, я перебрасывал оба, и по какой-то причине .tfront - это тот, который показывает – CFleming

@ user3337821 Не знаете, какой желаемый эффект? Является ли «А» отображенным как полный «А», с верхней частью одного цвета, а нижняя часть - другим цветом? Без формирования «алмазной» формы? Благодарю. – guest271314

Не знаете, что именно представляет собой желаемый эффект. Может быть, это?

fiddle

.letter-container h2 a .twrap:hover .tup { 
    -webkit-transform: rotateX(90deg); 
}

источник

2014-03-22 17:17:09

Css Transform не работает правильно

ответ

Смежные вопросы