Question

我在网格布局时间表中创建了我网站上的旋转div。方形div旋转180度，初始图像显示div旋转时对文本的更改。我现在的问题是因为我正在使用css3作为动画，当文本显示文本也旋转180度所以它是相反的。

代码如下。

Here is a livelink旋转的div，它们是显示stage1,2,3等的div。我将删除此链接，一旦问题已经回答了该帖子的后代。

CSS for SPINNING DIVS

.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.large .hover-img, .trigger.large .hover-img.hover_effect {
    width: 400px;
}
.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;
}

HTML for SPINNING DIVS

<div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" width="200"/>Text Here 4</div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img5"><img src="STEP3.jpg" width="200"/>Text Here 5</div>
        </div>
    </div>
    <div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img6"><img src="STEP2.jpg" width="200"/>Text Here 6</div>
        </div>
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img7"><img src="STEP4.jpg" width="200"/>Text Here 7</div>
        </div>
    </div>
</div>

Answer 1

试试这段代码吧，它为我工作：

＆＃13;

.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.large .hover-img, .trigger.large .hover-img.hover_effect {
width: 400px;
}
.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 img {
display: none;
}

.trigger > .hover-img.img4 > span
{
  display:none;
}

.trigger:hover > .hover-img.img4 > span
{
    display:block;
    transform: rotateY(-180deg);
}

＆＃13;

<div class="col">
        <div class="trigger">
            <div tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" width="200"/>
                <span>Text Here 4</span>
            </div>
        </div>
  
</div>

＆＃13;

我只是在上面的代码检查中添加了一些带有一些样式的跨度，如果您有任何疑问，请告诉我！

Answer 2

这是你的Html：

 <div class="col">
    <div class="trigger">
        <div tabindex="0" class="maincontent hover-img img4">
            <img src="STEP1.jpg" width="200" />
            <p>Text Here 4</p>
        </div>
    </div>
    <div class="trigger">
        <div tabindex="0" class="maincontent hover-img img5">
            <img src="STEP3.jpg" width="200" />
            <p>Text Here 5</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>Text Here 6</p>
        </div>
    </div>
    <div class="trigger">
        <div tabindex="0" class="maincontent hover-img img7">
            <img src="STEP4.jpg" width="200" />
            <p>Text Here 7</p>
        </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.large .hover-img, .trigger.large .hover-img.hover_effect {
    width: 400px;
}
.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;
}
.trigger:hover p {
    display:block;
    transform:scaleX(-1)
}
}

这是有效的Demo

我已将您的文字包装到<p>标记中。并添加了以下样式。

.trigger:hover p {
display:block;
transform:scaleX(-1)
}

参考转化here

css动画旋转div也旋转180度文本

2 个答案: