Drag the mouse over the door and open it!
The door image is placed inside the door frame created with a div element. The door itself is a png image file.
The CSS transform-origin:right property lets the door shrink from the left to the right side which provides the impression as if the door is opening if you put the cursor on top of the door. To show the effect in all browsers the prefixes -ms- for Internet Explorer and -webkit- for all other browsers have to be put in front of transform-origin.
The duration of the animation is set to 5 seconds with the name "open". The @keyframes property describes details of the animation "open". We want to make a lateral rotation of the door therefore we use the rotateY(deg) property. @keyframes needs the prefix -webkit- as well.
Note:the hover effect is not working on a touch screen.
The door image is placed inside the door frame created with a div element. The door itself is a png image file.
The CSS transform-origin:right property lets the door shrink from the left to the right side which provides the impression as if the door is opening if you put the cursor on top of the door. To show the effect in all browsers the prefixes -ms- for Internet Explorer and -webkit- for all other browsers have to be put in front of transform-origin.
The duration of the animation is set to 5 seconds with the name "open". The @keyframes property describes details of the animation "open". We want to make a lateral rotation of the door therefore we use the rotateY(deg) property. @keyframes needs the prefix -webkit- as well.
Note:the hover effect is not working on a touch screen.
No comments:
Post a Comment