Как сделать флип-карту совместимой с другими браузерами? - PullRequest
Новая
       9

Как сделать флип-карту совместимой с другими браузерами?

0 голосов
/ 21 марта 2019

new here

Я создаю веб-сайт и хотел бы, чтобы он был совместим со всеми браузерами, пока у меня есть эта флип-карта для раздела профиля, однако всякий раз, когда я пробую его в safari или другом браузере, которыйэто не гугл хром, он сходит с ума и показывает как спереди, так и сзади.Если бы кто-то мог предоставить помощь или руководство, которое было бы очень признательно, спасибо. 

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>

1 Ответ

0 голосов
/ 21 марта 2019

Вы можете попытаться обратиться к приведенному ниже примеру, который совместим с 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>

Ссылка:

Ссылка примера флип-карты

Далее, Вы можете попробовать изменитькод согласно вашему собственному требованию.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...