how will i add the flip animation to a button. The + button on the frontside instead of flipping on hover could be a start.
https://bootsnipp.com/snippets/92xNm
i understand that the animation comes from the
.image-flip:hover .backside,
.image-flip.hover .backside {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
border-radius: .25rem;
}
.image-flip:hover .frontside,
.image-flip.hover .frontside {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
but how could i add this to a click event instead?
im using C# blazor if it changes anything.
Can't you use :active?
I think the better way is to use JS onclick and add/remove class to it.
Related
Hello I've created simple infinite animation using css, but there are a simple problem that I need the animation is loop for ever smoothly.
.rotate{
width:200px;
height:200px;
margin:50px auto;
background-color:#00e95a;
animation-name:rotate;
animation-duration:1s;
animation-iteration-count:infinite;
animation-fill-mode:both;
}
#keyframes rotate {
from {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
<div class="rotate">
</div>
Just add animation-timing-function: linear;.
Note: The problem was caused by the default timing state, which is ease.
.rotate {
width: 200px;
height: 200px;
margin: 50px auto;
background-color: #00e95a;
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-fill-mode: both;
animation-timing-function: linear;
}
#keyframes rotate {
from {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
<div class="rotate"></div>
As #Kind user has mentioned you should hard reset animation-timing-function to linear, because the intial value of animation-timing-function is ease.
reference: https://developer.mozilla.org/en/docs/Web/CSS/animation-timing-function
So i'm a little new to rails and javascript,
I love the look of this, http://codepen.io/msisto/pen/LntJe
Heres the codepen code:
#-webkit-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loading-spinner {
-webkit-animation-duration: 0.75s;
-moz-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: rotate-forever;
-moz-animation-name: rotate-forever;
animation-name: rotate-forever;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
height: 30px;
width: 30px;
border: 8px solid #ffffff;
border-right-color: transparent;
border-radius: 50%;
display: inline-block;
}
body {
background: #774CFF;
}
.loading-spinner {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 50%;
margin: -15px 0 -15px;
}
<body>
<div class="loading-spinner"></div>
</body>
However i'm not sure how i can get this into my application. I'm wanting to have it so that this spins before each page loads.
Any ideas what i can do? any gems for this or?
Rails 4+ comes with Turbolinks gem.
You use this events to show/hide the loading before page loads.
I'm trying to position multiple divs on top of a background image so it makes a cool effect. The main issue is that the website is responsive and so is the image - it's background-size: cover which makes it hard to keep the overlays exactly where they need to be when viewing larger / smaller screens. I've created a crude JSFiddle to show what I mean. In this example I'm am trying to just overlay the animated boxes over the Koala's eyes.
I'm not sure if it's easier to get the coords of where I want the overlays to be and work with that or if I need to work with the window offset. Since it's also centered and when zoomed out it changes position-y and I'm unsure how to even track that being a background image.
Really what I'm hoping for is to get some insight on how to track the exact position of coords on this background image or point me in different direction to solve this issue.
#koala { background: url( 'http://i.imgur.com/1xZ17bk.jpg' ) no-repeat center; background-size: cover; position: relative; width: 100%; height: 768px; }
#leftEye,
#rightEye { width: 20px; height: 20px; background-color: #F00; position: absolute;
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
#leftEye { top: 48%; left: 37%; }
#rightEye { top: 59%; right: 35%; }
#-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-ms-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.notneeded { width: 100%; height: 50px; background-color: beige; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="notneeded"></div>
<div id="koala">
<div id="leftEye"></div>
<div id="rightEye"></div>
</div>
<div id="footer" class="notneeded"></div>
A much simpler solution is to use the window width changes to your advantage. So, ordinarily, you would measure the changes in your window sizes and subtract that from the eye's current position. However, because your background is centered, you need to alter that slightly - take the old window position, subtract the new window position and divide the result by two.
I've done this with jQuery.
var leftEye = $('#leftEye');
var rightEye = $('#rightEye');
var oldLeftEyePos = leftEye.position().left;
var oldRightEyePos = rightEye.position().left;
var oldWindowWidth = $(window).width();
$(window).resize(function(){
var newWindowWidth = $(window).width();
leftEye.css({
left: oldLeftEyePos - ((oldWindowWidth - newWindowWidth) / 2)
});
rightEye.css({
left: oldRightEyePos - ((oldWindowWidth - newWindowWidth) / 2)
});
});
Here's an updated jsfiddle with an example;
http://jsfiddle.net/joe5hjr3/10/
Disclaimer: This isn't perfect. It shrinks great, but as you go above a certain size, they start to close in on eachother - but hopefully, this is enough to get you on the right track. Also, it does not work great for zooming out, but works fine for zooming in.
Since you asked for pointing in a direction this is what I would try:
If the #koala-divs height is fixed 768px and width responsive 100% I would try to work with:
background-size: 100% auto;
background-position: center;
I guess now you could calculate the position for the rotating divs relative to the #koala-divs width and the proportion of the background-image.
X-coordinates should be easy once you know the x-coordinates of the eyes relative in the image (for e.g. 40% left and 60% right)
Y-coordinates are a bit trickier I assume. Lets say your image is sized 1200 x 800. Its proportion is 3:2 (12:8 -> 6:4 -> 3:2).
Now you could get the total width of the #koala-div with jquery/javascript and multiply it with 0,666666666666666666666666 (two thirds) to get the actual height of the background image.
From there you can derive the y-coordinates similar to the way i proposed for the x-coordinates. But you need to imagine it to be verticaly cut in half and position in relatively in each half.
I don't know if you can follow my thoughs or even if they are useful. Since I got not enough time today I hope this helps nevertheless...
Have a nice Tuesday!
edit/note:
The image will just cover the div as long as the div is at least as wide as the image... If it gets to small/narrow you will get empty space above and below the image.
After I change icon, rotate no longer works in Internet Explorer and Firefox, but it does in other browsers.
Here is the page
Here is the source
js:
<script language="JavaScript">
<!--
var position = "up";
function rotate()
{
if (position == "right"){
current_image.className = 'rotate_down BigPicture';
position = "down";
}
else if(position == "down"){
current_image.className = 'rotate_left BigPicture';
position = "left";
}
else if(position == "left"){
current_image.className = 'rotate_up BigPicture';
position = "up";
}
else if(position == "up"){
current_image.className = 'rotate_right BigPicture';
position = "right";
}
}
//-->
</script>
css:
<style>
.rotate_left
{
transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
}
.rotate_right
{
transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.rotate_up
{
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.rotate_down
{
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
</style>
This code works but crashed with some other code in the document (in said browsers).
I'm trying make an isometric JavaScript game and I thought it would be nice to use CSS transformations for the grid.
#grid {
position: absolute;
width: 800px;
height: 800px;
left: 400px;
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-ms-transform: rotate(-45deg) skew(15deg, 15deg);
transform: rotate(-45deg) skew(15deg, 15deg);
}
(see here for work so far: http://jsfiddle.net/8nydh/)
The images for the buildings however I don't want to transform.
Now I would like some advice on how to achieve this.
Should I alter the structure so the tile is last descendant and the only transformed item? (making the setup slightly more complicated).
Is there a way to "reset" CSS transformation on the child element (not counter transforming it!)
Should I just draw the images over the grid by other means of positioning?
Better ideas? Whole different technique/approach?
you may apply exact opposite transformation to childs.
http://jsfiddle.net/GCyrillus/ZfqfS/
transform: rotate(-45deg) skew(-15deg, -15deg);
back to
transform: rotate(45deg) skew( 0deg, 0deg);
I know its old question but this answer might help others.
For parent
#grid {
position: absolute;
width: 800px;
height: 800px;
left: 400px;
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-ms-transform: rotate(-45deg) skew(15deg, 15deg);
transform: rotate(-45deg) skew(15deg, 15deg);
}
For Child div
#child{
-moz-transform: rotate(45deg) skew(-15deg, -15deg);
-webkit-transform: rotate(45deg) skew(-15deg, -15deg);
-ms-transform: rotate(45deg) skew(-15deg, -15deg);
transform: rotate(45deg) skew(-15deg, -15deg);
}