css - css 变换在移动浏览器中反向显示
问题描述
下面的代码在网络浏览器中正确显示圆圈内的内容。在移动浏览器中，内容以相反的顺序显示（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>解决方案
为类添加opacity:0值.do-info-wrap并.do-info在悬停时更改值opacity:1可以解决问题。
/**************
* 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);
opacity:0;
}
.do-info {
position: absolute;
width: 100%;
height: 100%;
transition: all 0.4s ease-in-out;
transform-style: preserve-3d;
opactiy:0;
}
.do-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.do-info .do-info-back {
display: inline-block;
transform: rotate3d(0, 1, 0, 180deg);
-webkit-transform: rotate3d(0, 1, 0, -180deg);
-ms-transform: rotate3d(0, 1, 0, -180deg);
-moz-transform: rotate3d(0, 1, 0, -180deg);
-o-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 {
opacity:1;
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 {
opacity:1;
display: block;
transform: rotate3d(0, 1, 0, -180deg);
-webkit-transform: rotate3d(0, 1, 0, -180deg);
-ms-transform: rotate3d(0, 1, 0, -180deg);
-moz-transform: rotate3d(0, 1, 0, -180deg);
-o-transform: rotate3d(0, 1, 0, -180deg);
}<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>请注意，
:hover与网络浏览器相比，移动（触摸）设备可能无法正常工作。也许您可以单独为移动设备提供更好的体验。
推荐阅读
- amazon-web-services - 我可以使用 lambda 将数据从 s3 导出到 dynamoDB 吗？
- python - 使用条件参数创建组合并删除值
- google-cloud-firestore - GQL查询选择名称默认的种类
- list - 如果“milk”不在列表中，为什么我的代码不会将“milk”附加到列表的末尾？
- python - Matplotlib 条形图 x 轴下方的负值
- angular - 功能在其他功能之前运行，尽管位于稍后
- c# - 使用 lambda 表达式表示扩展方法
- c++ - “typename iterator_traits”是什么意思
::difference_type”是什么意思？ - json - 如何将 KotlinModule 注册到 AWS lambda Jackson Object Mapper？
- excel - 将每个文件添加到文件夹中