CSS Transition Turning Images

Сергей Кутузов

Try it, hover over my photo.

Hyperlinks, background images and what can be inserted into the html block are also easily inserted.

 

Code:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Turning Images</title>
<style>
.perspective--100 {
  perspective: 100px;
  -webkit-perspective: 100px;
	  -ms-perspective: 100px;
}

.otcrytka {
  display: block;
  text-align: center;
  width: 150px;
  height: 150px;
  color: #fff;
  background-color: rgb(55,124,255);
  font-size: 20px;
  line-height: 250px;
  background-image: url(images/sk1.jpg);
  border-radius: 7px;
  box-shadow: inset 0 0 0 3px #705E5F;
  -webkit-transition: transform 3s;
	  -ms-transition: transform 3s;
	  transition: transform 3s;

}

.otcrytka:hover {
  -webkit-transform: rotateY(180deg);
	  -ms-transform: rotateY(180deg);
	  transform: rotateY(180deg);
}

</style>
</head>
<body>

<div class="perspective"><a href="https://starper55plys.ru/">
  <span class="otcrytka">
    Sergei Kutuzov
 < /span></a>
    </div>
</body>
</html>
This entry was posted in Free Scripts. Bookmark the permalink.
А так же:

Leave a Reply

Your email address will not be published. Required fields are marked *