【发布时间】：2018-11-30 01:50:29
【问题描述】：
以下代码在网络浏览器中正确显示圆圈内的内容。 在移动浏览器中，内容以相反的顺序显示（iphone safari，chrome）
知道如何解决这个问题吗？
https://codepen.io/girish979/pen/gQQzMQ
/**************
* Basics for this pen from
* https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/
* added support for bootstrap grids. extracted border-radius to use effect on rectangles as well
*/
/*
* separate class for round elements
*/
.do-circle {
border-radius: 50%;
}
.do-item {
width: 100%;
height: auto;
position: relative;
}
.do-item-circle {
max-width: 261px;
}
.do-item-square {
max-width: 350px;
}
.do-info-wrap {
position: absolute;
top: 20px;
left: 20px;
width: calc(100% - 40px);
height: calc(100% - 40px);
transition: all 0.4s ease-in-out;
perspective: 800px;
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), inset 0 0 3px rgba(115, 114, 115, 0.2);
}
.do-info {
position: absolute;
width: 100%;
height: 100%;
transition: all 0.4s ease-in-out;
transform-style: preserve-3d;
}
.do-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.do-info .do-info-back {
transform: rotate3d(0, 1, 0, 180deg);
-webkit-transform:rotate3d(0, 1, 0, 180deg);
background: #000;
}
.do-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 90px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.do-info-back {
text-align: center;
}
.do-info-back > div {
color: #fff;
padding: 10px 5px;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid #fff;
}
.do-item:hover .do-info-wrap {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 3px rgba(255, 255, 255, 0.8);
}
.do-item:hover .do-info {
transform: rotate3d(0, 1, 0, -180deg);
-webkit-transform: rotate3d(0, 1, 0, -180deg);
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="do-item do-item-circle do-circle">
<img src="http://placehold.it/261x261" class="do-item do-circle">
<div class="do-info-wrap do-circle">
<div class="do-info">
<div class="do-info-front do-circle"></div>
<div class="do-info-back do-circle">
<h3>Max Mustermann (43)</h3>
<div>Mönchaltdorf
<br /> Beruf / Funktion</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="do-item do-item-circle do-circle">
<img src="http://placehold.it/261x261" class="do-item do-circle">
<div class="do-info-wrap do-circle">
<div class="do-info">
<div class="do-info-front do-circle"></div>
<div class="do-info-back do-circle">
<h3>Max Mustermann (43)</h3>
<div>Mönchaltdorf
<br /> Beruf / Funktion</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="do-item do-item-circle do-circle">
<img src="http://placehold.it/261x261" class="do-item do-circle">
<div class="do-info-wrap do-circle">
<div class="do-info">
<div class="do-info-front do-circle"></div>
<div class="do-info-back do-circle">
<h3>Max Mustermann (43)</h3>
<div>Mönchaltdorf
<br /> Beruf / Funktion</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="do-item do-item-circle do-circle">
<img src="http://placehold.it/261x261" class="do-item do-circle">
<div class="do-info-wrap do-circle">
<div class="do-info">
<div class="do-info-front do-circle"></div>
<div class="do-info-back do-circle">
<h3>Max Mustermann (43)</h3>
<div>Mönchaltdorf
<br /> Beruf / Funktion</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="do-item">
<img src="http://placehold.it/350x250" class="do-item">
<div class="do-info-wrap">
<div class="do-info">
<div class="do-info-front"></div>
<div class="do-info-back">
<h3>Max Mustermann (43)</h3>
<div>Mönchaltdorf
<br /> Beruf / Funktion</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>【问题讨论】：
-
能否请您澄清一下逆序。除了圆圈不再在移动设备上排成一排之外，我没有看到内容顺序的反转。
-
将图片添加到帖子i.stack.imgur.com/ueDpc.png
-
@gggg 我已经在下面提供了答案，您的问题得到解决了吗？
标签： css