I'm a student (and very new to web design) and I'm trying to create a door-opening effect by using 3D animations of CSS3 (without javascript). What I actually want is that I want two windows to be opened when the mouse hovers over them.
I currently have this:
(Image 1: http://ift.tt/1cXWpxv )
I used Sublime Text 2, and when I refresh the browser (Opera) this is what's happening with my window images...
My current coding for CSS and HTML:
body { background: #ffffff; text-align: center; }
img
{
margin: 100px auto;
-webkit-transform: perspective
(300) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
-webkit-animation: door 1s;
}
@-webkit-keyframes door
{
0%
{
-webkit-transform: perspective(-300) rotateY(-90deg);
-webkit-animation-timing-function: ease-in;
}
50%
{
-webkit-transform: perspective(300) rotateY(0deg);
-webkit-animation-timing-function: ease-out;
}
100%
{
-webkit-transform: perspective(300) rotateY(20deg);
-webkit-animation-timing-function: ease-out;
}
}
<!DOCTYPE html>
<html>
<<head>
<link rel="stylesheet" href="Hover-door.css" />
</head>
<body>
<img src="door-left.jpg" />
<img src="door-right.jpg" />
</body>
</html>
What I want is:
(Image 2: http://ift.tt/1cXWpxx )
This (image above. Sorry for bad drawing!) happening when the mouse hovers. I'm sorry for asking you to 'teach' me...but I am really stuck...
Aucun commentaire:
Enregistrer un commentaire