Я - веб-разработчик. для веб-сайта моего клиента мне нужно применить влияние на зависание определенного div, как показано в этом website. когда я наводил на div, фон должен меняться поворотом. как я могу это сделать. Я могу только облегчить эффект для изменения фона, используя переход css3. есть ли способ сделать то же самое без использования jquery?Фоновый эффект изменения путем поворота на зависании через CSS3
увидеть scrrenshot 
Я имитировать обеспечивают анимацию без JQuery. Ключ для достижения этого, который использует родительский & chidl отношение и понять ключевой момент, когда анимация играет.
.hover{
position: relative;
width: 200px;
height: 200px;
background-color: #1cf;
}
.background{
position: absolute;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
line-height:10;
background-color: #c33;
transition: all 0.3s;
z-index: 2;
font-size: 20px;
}
.content{
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
text-align: center;
font-size: 20px;
opacity: 0;
line-height: 10;
transform: scale(-1,1);
transition: all 0.3s;
}
.hover:hover .background{
transform: scale(-1,1);
opacity: 0;
}
.hover:hover .content{
transform: scale(1,1);
opacity: 1;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="hover">
<div class="background">
This is background!!!
</div>
<div class="content">
This is content!
</div>
</div>
</body>
</html>Позвольте мне реализовать это в моем проекте и проверить – droidev
.spin{
position: relative;
top: 45%;
left: 45%;
height: 100px;
width: 100px;
background: red;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
border-radius: 10px;
border: 1px solid black;
box-sizing: border-box;
padding: 10px 30px;
font-size: 25px;
font-family: thin;
text-align: center;
transition: 1.5s;
}
.spin:hover{
transform: rotate(360deg);
}
.flip{
position: relative;
top: 45%;
left: 0%;
height: 100px;
width: 100px;
background: red;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
border-radius: 10px;
border: 1px solid black;
box-sizing: border-box;
padding: 10px 30px;
font-size: 25px;
font-family: thin;
text-align: center;
transition: 1.5s;
}
.flip:hover{
transform: rotateY(180deg);
background: black;
}
@font-face {
font-family: 'thin';
src: url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2');
}<div class='spin'>Spin me!</div>
<div class='flip'>Flip me!</div>
Если вы не хотите использовать 'jQuery', не пометить его – Downgoat
@ vihan1086 удалить тег – droidev
Причина заключается в том, что может быть смущает некоторых людей – Downgoat