时间戳

首页 > 解决方案 > 我如何使翻转卡与其他浏览器兼容

html - 我如何使翻转卡与其他浏览器兼容

问题描述

新来的

我正在制作一个网站，并希望它与迄今为止的所有浏览器兼容前后。如果有人能提供帮助或指导，将不胜感激。

body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
  z-index: 2;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
  z-index: 1;
}
</head>
<body>

<h3>Hover over the image below:</h3>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1> 
      <p>Architect & Engineer</p> 
      <p>We love that guy</p>
    </div>
  </div>
</div>

</body>
</html>

标签： htmlcssinternet-explorersafaricross-browser

解决方案

您可以尝试参考下面与IE、MS Edge、Chrome、FireFox 和 Safari浏览器兼容的示例。

代码：

#container {
	position:relative;
	height:300px;
	width:300px;
	margin:20px auto;
}

#container > div {
	position:absolute;
	left:0;
	top:0;
	width:300px;
	height:300px;
	padding:20px;
	background:#3C404B;
	-webkit-transition:1.5s ease-in-out;
	-moz-transition:1.5s ease-in-out;
	transition:1.5s ease-in-out;
}

#container > div.lower {
	background:#000;
	-moz-backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-moz-transform:perspective(800px) rotateY(180deg);
	-webkit-transform:perspective(800px) rotateY(180deg);
	transform:perspective(800px) rotateY(180deg);
}

#container > div h1 {
	font-size:20px;
	padding:0;
	margin:0;
	color:#fff;
	line-height:40px;
}

#container > div p {
	font-size:11px;
	padding:0;
	margin:0;
	color:#eee;
	line-height:20px;
}

#container > div a {
	color:#ff0;
}

#container > div.upper {
	-moz-backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-moz-transform:perspective(800px) rotateY(0deg);
	-webkit-transform:perspective(800px) rotateY(0deg);
	transform:perspective(800px) rotateY(0deg);
}

#container:hover > div.lower {
	-moz-transform:perspective(800px) rotateY(0);
	-webkit-transform:perspective(800px) rotateY(0);
	transform:perspective(800px) rotateY(0);
}

#container:hover > div.upper {
	-webkit-transform:perspective(800px) rotateY(-179.9deg);
	-moz-transform:perspective(800px) rotateY(-179.9deg);
	transform:perspective(800px) rotateY(-179.9deg);
}
<div id="container">
	<div class="lower">
		<h1>Back</h1>
		<p>Works in IE10, Chrome, Firefox & Safari</p>
		<p>Source <a href="https://www.cssplay.co.uk/menu/css3-3d-card.html">CssPlay</a>
	</div>
	<div class="upper">
		<h1>Front</h1>
		<p>Works in IE10, Chrome, Firefox & Safari</p>
		<p>Source <a href="https://www.cssplay.co.uk/menu/css3-3d-card.html">CssPlay</a>
	</div>
</div>

参考：

翻转卡示例链接

此外，您可以尝试根据自己的要求修改代码。

推荐阅读