The floating effect of this photo was first seen in my wedding electronic photo album. I thought it could only be done with professional video software like AE, but later I found out that CSS3 can also be easily produced.
First look at the effect of CSS3:
In fact, it is not difficult to do, but there are a few places that need to be paid attention to, otherwise you will find that the effect cannot appear.
The following attributes are mainly used:
1. perspective, set the view where the element is viewed
2. transform, rotate, scale, move or tilt the element
3. animation, set the animation of the element
1. Set perspective
The current browser does not support the perspective attribute.
Chrome and Safari support an alternative -webkit-perspective property.
This is the first place to pay attention to, you need to use -webkit-perspective to achieve the desired effect.
The -webkit-perspective attribute works on its child elements, so that the child elements will get a perspective effect. So we need to add a layer of div to the outer layer of img to set this property.
<style>
div{
-webkit-perspective:150;//这个数值可自行修改
}
</style>
<div>
<img src=""/>
</div>Second, set the transform property
The next step is to set the transform attribute for the img tag, and use the photo to have a rotation effect.
<style>
img{
width:10em;
height:15em;
box-shadow:0 0 0 1em white;
transform:rotateY(20deg);
}
</style>
<img src="" />The rotateY() above is to rotate around the Y axis (vertical direction), which has no effect under normal circumstances, but with the -webkit-perspective attribute of the upper div, the effect will appear.
Here is the second thing to pay attention to, that is, the width of the img and the width of the div should be set to be the same, otherwise the effect will be different when rotating left and right (rotate parameter is positive or negative).
3. Set the animation
Because we want to make the floating effect, we need to "move".
<style>
img{
animation:rotate-anim 5s ease-in-out infinite;
}
@keyframes rotate-anim{
0%{
transform:rotateY(-20deg);
}
50%{
transform:rotateY(20deg);
}
100%{
transform:rotateY(-20deg);
}
}
</style>In order to use the effect more realistically, the speed curve of the animation here uses easa-in-out, which means that the animation starts and ends at a low speed.
Well, it's over here. If you need a demo , you can click to download.