Question

我目前正在构建一个带有div的网格布局网页，我有4个div（步骤div）使用css动画旋转但是由于某些原因，中间列中的div意味着完全静态，但文本正在旋转在这些也是。

一个应该是静止的旋转文本DIV的HTML

<div class="trigger">
    <div class="slider2">
        <div style="border-style: solid; border-width: 1px; border-color: #CCCCB2; border-radius: 5px; height: 200px; width: 200px; color: #CCC;"  class="testimony">
            <div class="caption-box">Web Updates</div>
            <div class="just_text">
                <p style="margin: 10px 20px;">Our service also includes a money saving update scheme. For a monthly fee you can have updates to keep your site fresh and dynamic.</p>
            </div>
        </div>
    </div>

来自网页的CSS

.slider2 {
position: relative;
}
.testimony {
display:table;
height: 200px;
width: 200px;
position:relative;
border:1px solid #ccccb2;
border-radius: 5px;
}
.testimonywide {
display:table;
height: 200px;
width: 400px;
position:relative;
border:1px solid #ccccb2;
border-radius: 5px;
}
.testimonyhigh {
display:table;
height: 400px;
width: 200px;
position:relative;
border:1px solid #ccccb2;
border-radius: 5px;
}
.caption-box {
text-align:center;
position: absolute;
right: 0;
height: 20px!important;
width:100px;
background-color: #CCC;
color: #fff;
z-index: 999;
}
.trigger {
width: 200px;
height: 200px;
overflow: hidden;
box-sizing: border-box;
}
.just_text {
display:table-cell;
vertical-align:middle;
color: #CCC;
}
.trigger.large {
width: 400px;
}
.trigger.vertical {
height: 400px;
}
.trigger.vertical * {
height: 400px;
}
.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;
}
.static {
position: relative;
width: 200px;
height: 200px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #CCCCB2;
border-radius: 5px; 
}
.staticlarge {
position: relative;
width: 400px;
height: 200px;
text-align: center;
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;
}
#container {
width:960px;
margin: 0 auto;
}
.row {
display: flex;
}
.col {
display:inline-block;
}
.trigger.large .hover-img, .trigger.large .hover-img.hover_effect {
width: 400px;
}
#apDiv1 {
position: absolute;
width: 100px;
height: 200px;
z-index: 1;
background-color: #999999;
}
.trigger:hover p {
display:block;
transform:scaleX(-1)
}
 blockquote {
    color: black;
    position: relative;
    display: inline-block;
    padding: 0 5px;
    margin: 0px auto;
}

blockquote p {
    margin-bottom: 5px;
}

blockquote:before,
blockquote:after {
    content: "“";
    font-size: 70px;
    font-family: "Georgia", Serif;
    color: #F47878;
    position: absolute;
    left: -30px;
    top: 5px;
}

cite {
    float: right;
    color: black;
    font-size: 12px;
    margin: 0;
    padding: 0;
}

blockquote:after {
    content: "”";
    right: -30px;
    left: auto;
}
body {
text-align: center;

}

.bodyCont{
width :800px;
margin:0px auto;
}

Answer 1

只需删除或更改不需要翻转的卡片上的 .trigger 类。这应该足以避免文本的问题。

这样其他4张卡片仍会翻转，但静态卡片上的文字不会继承动画。

解决div中不应该旋转的文本

1 个答案: