Эффективное лечение в домашних условиях
Простатит, геморрой, молочница и другие воспалительные заболевания

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.



<!DOCTYPE html>
<html lang="ru">
<meta charset="utf-8" />
<title>Turning Images</title>
.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);


<div class="perspective"><a href="https://starper55plys.ru/">
<span class="otcrytka">
Sergei Kutuzov
< /span></a>

This entry was posted in Free Scripts Ready Code. Bookmark the permalink.
А так же:

Leave a Reply

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