Устранение неполадок анимации div css3

Question

Устранение неполадок анимации div css3

0

Я пытаюсь устранить проблему, которая внезапно возникла на моей веб-странице. Если вы посмотрите на это оживление, вы увидите, что в моей схеме сетки шаг 1, шаг 2, шаг 3 и шаг 4 divs анимируются для вращения с использованием анимации css3. Однако при добавлении других css и внесении изменений по какой-то причине анимация возится. Предполагается, что div должен вращаться, а затем текст упрощается. Однако их текст отображается за div как div. Он также показывает текст, который находится в div выше! Я понятия не имею, что здесь произошло, но, пожалуйста, мне действительно нужна помощь некоторых людей, так как я не могу обдумать это!

HTML из рассматриваемых div

<div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" width="200"/><p>Fill out our order form choosing the service you require and your payment details. We will then take a deposit and book you into our diary.<p></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img5"><img src="STEP3.jpg" width="200"/><p>We will produce the work you require using the project plan. All of our work is produced Within the time limit set and to the highest possible standard.<p></div>
        </div>
    </div>
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img6"><img src="STEP2.jpg" width="200"/><p>We will have a face to face meeting to discuss everything that you require and we will put together a project plan.<p></div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img7"><img src="STEP4.jpg" width="200"/><p>A design is not finished until you are entirely happy. When we believe the work is complete we will send you an artwork approval form for you to sign and return.<p></div>
        </div>
    </div>
</div>

CSS разделов, о которых идет речь

.hover-img, .hover-img.hover_effect {
position: relative;
width: 200px;
height: 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform-style: preserve-3d;
text-align: center;
font-size: 0;
-webkit-user-select: none;
-webkit-touch-callout: none;
border-style: solid;
border-width: 1px;
border-color: #CCCCB2;
border-radius: 5px;
}

.trigger:hover > .hover-img {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
font-size: 14px;
color: #FFF;
}
.trigger:hover > .hover-img.img4 {
background-color: #f47878;
}
.trigger:hover > .hover-img.img5 {
background-color: #f6c447;
}
.trigger:hover > .hover-img.img6 {
background-color: #92cf96;
}
.trigger:hover > .hover-img.img7 {
background-color: #f47878;
}
.trigger:hover > .hover-img.img12 {
background-color: #92cf96;
}
.trigger:hover .hover-img img {
display: none;
}

Однако для более четкого представления о моей проблеме, пожалуйста, просмотрите livelink и увидите ошибку в шагах шагов и просмотрите мой исходный код. Я удалю ожидание ответа на вопрос о будущем потомстве почты.

Jesus Vasquez 12 апр. 2015, в 20:35

Источник

Теги:

javascript

jquery

html

css

css3

1 ответ

Ещё вопросы

Kano · Accepted Answer · 2015-04-12T17-43-00.000Z

Я бы изменил общий подход к такой анимации. Самый распространенный способ состоит в том, чтобы иметь 2 отдельных divs - переднюю грань и другую для заднего лица.

<div id="container">
    <div id="card">
      <div class="front face">
        <img src="your_PNG_file_here"/>
      </div>
      <div class="back face">
        <p>Your text goes here.</p>
      </div>
    </div>
</div>

Теперь вы будете переворачивать контейнер с обеих сторон

#container:hover #card {
  transform: rotateY(180deg);
}

скрипка

Таким образом вам не нужно будет время исчезать в тексте или в любом из них. :)

редактировать

И сетка из 4 штук - скрипка

привет не могли бы вы показать мне, как иметь 4 в сетке? как я не могу заставить его работать