Tech blog

PHP tutorials,a way to getting some thing new in web

Followers

Powered by Blogger.

Tuesday, 7 April 2015

Box Animation Effect using CSS

Unknown 00:54 , No comments :
Hi friends,Today i am posting here a topic which is not part of programming.I have created one simple animation effect using HTML5 and CSS3.Many of you have tried it by your own.You may find it useful because this code is so simple.

 CSS

h1:hover{

     /* Rotate div */
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
-webkit-animation:spin1 4s linear infinite;
    -moz-animation:spin1 4s linear infinite;
    animation:spin1 4s linear infinite;

}
h1{
   /* Rotate div */
    width: 50%;
    height: 20%;
    background-color: yellow;
    -ms-transform: rotateY(180deg); /* IE 9 */
    -webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
    transform: rotateY(180deg);
-webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
img:hover {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";

}
img
{
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover
{
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

 @-moz-keyframes spin1 { 100% { -moz-transform: rotate(360deg);font-size: 10px;} }
@-webkit-keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
@keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }

 HTML

Lets see how whole code will do.

 <html>
<head>
<title>Text Effect</title>
<style>
h1:hover{

     /* Rotate div */
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
-webkit-animation:spin1 4s linear infinite;
    -moz-animation:spin1 4s linear infinite;
    animation:spin1 4s linear infinite;

}
h1{
   /* Rotate div */
    width: 50%;
    height: 20%;
    background-color: yellow;
    -ms-transform: rotateY(180deg); /* IE 9 */
    -webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
    transform: rotateY(180deg);
-webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
img:hover {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";

}
img
{
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover
{
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

 @-moz-keyframes spin1 { 100% { -moz-transform: rotate(360deg);font-size: 10px;} }
@-webkit-keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
@keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
</style>
</head>
<body>
<h1>This is<br/>Image Animation of Box</h1><br/><br/>
<img src="e:\2.jpg" alt="flipped" border="0"/>

</body>
store file with whatevername.html and run in browser.change image path with your image path in img tag.


No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )

Popular Posts

  • How to create modal dialog using bootstrap
    We are now a days using css3 and html5,but responsive website is very necessary for all users who are surfing all sites online Developer ...
  • Upload audio using php and mysql
    Today, I am going to show you one script for audio file uploads like mp3,wmv,mp4 etc..This is as easy as we upload image using php.We guys ...
  • Excel Spreadsheet creation in PHP
    Spreadsheets are used everywhere and they are most useful to manage and organize data.They are quite popular. PHP also supports creation o...
  • Display Audio File On HTML5 page
    Today I am going to cover small but very useful topic of HTML5. In previous I explained you how to upload audio file in database using php....
  • How to upload video on Youtube using PHP
    Today, I am going to show you code for very advance API.We use youtube in daily basis but this time php will be used to post video on youtu...
  • Login with Google using PHP
    You can create your website with google login.You can now socialize your website on google. here is code for it: Please get google api c...
  • How To Read Text Files using PHP
    I have posted tutorials for creating and posting of data.But here is good code and easy way in php to read text files which is stored in fo...
  • Create Directory and text File using PHP
    We have been regularly in use of making directory using windows. and also text file. Here is code which will help u to make folder ...
  • Creating Twitter Apps
    Today I will tell you about how to create twitter application in your account Step-1: go to twitter application site: http://dev.twitt...
  • Iphone Push Notification using PHP
    In previous article we have learned android gcm notification using php but now we will see iphone notification using php. Here I hav...

Total Pageviews

Recent Visitors

visitors by country counter
flag counter

Contact Form

Name

Email *

Message *