<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.aa,.dd{
height:1000px;;
}
.cc{
width: 300px;
padding:50px 0;
margin:20px auto;
background:#00cc00;
text-align:center;
}
.cc-act img{
animation:skewIn 1s linear 0.5s
}
@keyframes skewIn{
0%{
transform: perspective(400px) rotateY(-90deg);
opacity: 0;
}
40%{
transform:perspective(400px) rotateY(-10deg);
}
70%{
transform:perspective(400px) rotateY(10deg);
}
100%{
transform:perspective(400px) rotateY(0deg);
opacity: 1;
}
}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(window).scroll(function () {
var $cc=$(".cc"),clientH = $(window).height(),$scroll = $(window).scrollTop();
if($cc.offset().top-$scroll > 0 && $cc.offset().top-$scroll<clientH){
$cc.addClass("cc-act")
}else{
$cc.removeClass("cc-act")
}
});
</script>
</head>
<body>
<div class="aa"></div>
<div class="cc">
<img src="img/index-by.jpg"/>
</div>
<div class="dd"></div>
</body>
</html>
