I am working on a website and want to spin the logo 360 degrees. The website URL is http://flipped.in/JSJ/
The example code i am using is:
.rotate{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.rotate:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
Now, i tried replacing the class 'rotate' with the one my logo has but it does not work. Can someone help me adding the right class to this?
The code works as such on Chrome and Firefox. It does not work on IE, since IE implements (in modern versions) the standard names for the properties involved, and the code lacks a setting for the transform property under its standard name. Adding it makes the code work on modern browsers.
<style>
.rotate{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.rotate:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg); /* This was missing. */
}
</style>
<img class=rotate src=
"http://flipped.in/JSJ/wp-content/uploads/2014/12/JSJ-Logo.png"
alt="Jump Start Jonny">
Related
I'm trying to make a span rotate by 90° and to change margin-top on hover, but failing.
The span does rotate, but doesn't change its margin-top.
HTML
<div class="cheersWrapper">
<span class="cheers">
<h1>Hi!</h1>
</span>
<span class="smile">
<h1> :)</h1>
</span>
</div>
CSS
.cheersWrapper{
-webkit-transition-duration: 5s;
-moz-transition-duration: 5s;
-o-transition-duration: 5s;
transition-duration: 5s;
}
.cheersWrapper .smile {
display: none;
position: relative;
}
.cheersWrapper:hover .smile {
display: inline-block;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
transition: margin-top .5s;
-webkit-transition: margin-top;
-moz-transition: margin-top .5s;
-o-transition: margin-top .5s;
}
.cheersWrapper:hover .smile:hover{
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
margin-top:-25px;
}
.cheersWrapper .cheers{
display: inline-block;
}
Demo: http://jsfiddle.net/vmrq7ep7/3/
It looks like it has a sort of a Parkinson syndrome and it's stuck.
How can I make it animate its margin top?
Thanks in advance for your help.
You can use a css translate instead of margin for the .cheersWrapper:hover .smile:hover class:
transform:rotate(90deg) translate(0,-25px);
Then for the .cheersWrapper:hover .smile class set:
transition-property: transform;
Edited jsfiddle: http://jsfiddle.net/vmrq7ep7/4/
btw you should only need the -webkit- prefix and -ms- for IE9.
I'm trying to create a loading bar, which will go longer on width with duration, with .less and here's my layout:
<section class="home-page container">
<div class="home-content col span_8_of_8">
<div class="preloader-1">
<em class="loader"></em>
</div>
</div>
</section>
The LESS part is here:
div.preloader-1 {
width: 100%;
border-radius: 1px;
border: thin solid #d5d5d5;
em.loader {
background: #main-red;
width: #preload_width;
.addBar('width', 5s);
}
}
#body-font: 'Droid Sans', sans-serif;
#heading-font: 'Oswald', sans-serif;
#flash-red: #ff0000;
#flash-green: #40bc88;
#main-green: #40bc88;
/* preloader 1 settings */
#preload_width: 10%;
#preloader1_class: 'preloader-1';
.addBar(#property, #duration, #style:ease-in-out) when(#preload_width <= 100%) {
-webkit-transition-property: #property;
-webkit-transition-duration: #duration;
-webkit-transition-timing-function: #style;
-moz-transition-property: #property;
-moz-transition-duration: #duration;
-moz-transition-timing-function: #style;
-ms-transition-property: #property;
-ms-transition-duration: #duration;
-ms-transition-timing-function: #style;
-o-transition-property: #property;
-o-transition-duration: #duration;
-o-transition-timing-function: #style;
transition-property: #property;
transition-duration: #duration;
transition-timing-function: #style;
#preload_width: (#preload_width + 10%);
}
Error came out like this:
>> SyntaxError: Recursive variable definition for #preload_width in app\assets\s
tylesheets\less\front\preloader_1.less on line 9, column 3:
>> 8 width: #preload-width;
>> 9 .addBar('width', 5s);
>> 10 }
I'm guessing it's on the whenpart in the less, but i'm not sure how to fix, can anyone explain to me how to do it? Thanks. (Oh yeah, the solution must not include JS or anything else, only pure .less)
Well, the problem is really here:
#preload_width: (#preload_width + 10%);
LESS can't handle variable redefinitions (e.g. changing a variable's value)
You're trying to create a variable with its own value.
Both of these problems can be solved by changing your new variable's name.
I wanted to create a Metro Style Website and want to add Buttons like in the following :
http://themeforest.net/item/metro-lab-responsive-metro-dashboard-template/full_screen_preview/5359122
When we hover over the 'New User', 'Sales' etc Tabs, the icons/Images in the tabs rotates, increases its size and looses opacity.
But I am not able to get the exact output. I get only 2 outputs at a time :
--> Opacity and Scaling
--> Opacity and Rotation
but not all of them simultaneously.
You can see where I had reached at :
http://developer.nuevothoughts.com/jiteen/attendance/docs/#
My Current CSS is :
.icon-rocket{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.icon-rocket:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
/******************************/
-webkit-transform: scale(2.5,2.5);
-moz-transform:scale(2.5,2.5);
opacity: 0.5;
-moz-opacity: 0.5;
}
I would appreciate any kind of Help in this.
add following code
.main_tab.shortcut.span2.padding20.text-center a:hover i {
font-size: 40px;
opacity: 0.5;
transform: rotate(45deg);
}
and remove the hover you used (icon-rocket:hover)
I have the following code of CSS3 for regular browsers and those with -webkit- suport.
But, what value should I really set for the following property:
-webkit-transition-property: ????;
Because a value like box-shadow is -webkit-box-shadow for -webkit- related usages, and then, for the above property, should I use box-shadow or -webkit-box-shadow?
If you want to have a transition of a property which also uses vendor prefixes itself, you need to add them.
Example CSS:
.my-class {
-webkit-transition: -webkit-box-shadow 1s;
-moz-transition: -moz-box-shadow 1s;
-ms-transition: -ms-box-shadow 1s;
-o-transition: -o-box-shadow 1s;
transition: box-shadow 1s;
}
With unprefixed properties it works like this:
.other-class {
-webkit-transition: color 1s;
-moz-transition: color 1s;
-ms-transition: color 1s;
-o-transition: color 1s;
transition: color 1s;
}
Browser support:
CSS3 transition
CSS3 box-shadow
You should use the corresponding vendor-prefixed property.
-webkit-transition-property: -webkit-box-shadow;
-moz-transition-property: -moz-box-shadow; /*For older versions of Firefox only*/
transition-property: box-shadow;
Check this example:
div {
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
}
is the same as (using shorthand version):
div {
transition: width 1s linear 2s;
-webkit-transition: width 1s linear 2s; /* Safari */
}
Here http://caniuse.com/#feat=css-transitions you can find when you need prefixes for transitions. There is a nice example here http://jsfiddle.net/davidThomas/XEWhk/1/ from another similar question that helps a lot.
I've set a transition and a transform for an element. I'd like to have different durations on each of my transformations (scale, perspective, rotate). Any way to achieve that?
Transition:
transition:-webkit-transform 1s linear;
-webkit-transition: -webkit-transform 1s linear; /** Chrome & Safari **/
Transform:
-webkit-transform: translate3d(50px, 114.82978723404256px, 0px) perspective(2000px) rotateX(40deg) scale(0.23297872340425532);
You can achieve it like following code. I've used it in my website and it works perfect.
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
-moz-transition: -moz-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
Hope it helps!
Thanks