对不应该在 div 中旋转的文本进行故障排除

Question

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

HTML 旋转文本 DIV 应该是静态的

<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

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

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

对不应该在 div 中旋转的文本进行故障排除

Troubleshooting text spinning in divs that it should not be

html

css

css-animations