Basically what I'm looking for is to be able to make an image do a rotation of 360 degrees and enlarge the image, I already have these two down.
What I need to do now is, work out how to actually make it rotate 360 degrees and enlarge to a different image, here's the css that I have:
.rotate img {
-moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.rotate img:hover {
cursor: crosshair
-moz-transform: rotate(360deg) scale(1.25);
-webkit-transform: rotate(360deg) scale(1.25);
-o-transform: rotate(360deg) scale(1.25);
-ms-transform: rotate(360deg) scale(1.25);
transform: rotate(360deg) scale(1.25);
}
This code works fine, all I need to know is how to make it turn into a different image.
If you can use a <div> with a background image rather than an actual <img> you can do it with css pretty easily.
Working Example
.rotate {
background: url("http://lorempixel.com/output/abstract-q-c-100-100-7.jpg") no-repeat;
height: 100px;
width:100px;
-moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.rotate:hover {
background: url("http://lorempixel.com/output/abstract-q-c-100-100-8.jpg") no-repeat;
cursor: crosshair;
-moz-transform: rotate(360deg) scale(1.25);
-webkit-transform: rotate(360deg) scale(1.25);
-o-transform: rotate(360deg) scale(1.25);
-ms-transform: rotate(360deg) scale(1.25);
transform: rotate(360deg) scale(1.25);
}
It can be done with some JavaScript added in... Also - rotate 2 divs rather than the img. Place one image in each div, over the other. As you rotate, fade the overlapping div (change the opacity) to 100%. This will give you the effect of fading one image into the next.
Related
I want to make element "tilt" on my page, to be more precise I have an .svg image (size 100px 100px) so I have these two css classes, and I have some strange effect, some small white line in upper left corner.
I have tried to add
-webkit-backface-visibility:hidden;
but it solws problem only in Chrome if I dont hover while page is loading.
.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.tilt:hover {
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-500deg);
-o-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
transform: rotate(-50deg);
}
Whenever I seem to apply some code to let's say move a div for example using the latest iOS Safari browser it doesn't actually transition between the two rules set. I have tried changing to use other than percentage values but still to this day, I have never been able to get it to work when I use transition: transform; for any translate property applied.
I'm using the correct prefixes and checked support and should be working no problem.
http://caniuse.com/#search=transition
http://caniuse.com/#search=translate
JSFiddle
$('button').on('click', function() {
$('.mydiv').toggleClass('added-class');
});
.mydiv {
display: inline-block;
width: 100px;
height: 50px;
background-color: red;
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
-moz-transition: transform 0.6s ease-out;
-o-transition: transform 0.6s ease-out;
-webkit-transition: transform 0.6s ease-out;
transition: transform 0.6s ease-out;
}
.added-class {
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv"></div>
<button type="button">Toggle class</button>
Old versions of iOS Safari support only vendor-prefixed properties and values for transition and transform, so you should use -webkit-transition: -webkit-transform instead -webkit-transition: transform:
JSFiddle
$('button').on('click', function() {
$('.mydiv').toggleClass('added-class');
});
.mydiv {
display: inline-block;
width: 100px;
height: 50px;
background-color: red;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.6s ease-out;
-moz-transition: transform 0.6s ease-out;
-o-transition: transform 0.6s ease-out;
transition: transform 0.6s ease-out;
}
.added-class {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv"></div>
<button type="button">Toggle class</button>
I got a map with 12 dots that each need to fade in on hover like in the demo. The problem is that I can't get the radius animated. Is it possible to fade the radius size of the SVG in with CSS or is there another way to do it? My second problem is that I can't get a background image in my SVG's. Is there a solution?
My code...
ya it is possible..
Fiddle
css
#container {
}
#kaart {
}
.fullkaart {
fill:#7FC577;
}
.cirkel {
fill: green;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
-webkit-transition: fill, -webkit-transform
-moz-transition: fill, -webkit-transform
-ms-transition: fill, -webkit-transform
-o-transition: fill, -webkit-transform
transition: fill, -webkit-transform
-webkit-transition-duration: 3s;
-moz-transition-duration: 3s;
-ms-transition-duration: 3s;
-o-transition-duration: 3s;
transition-duration: 3s;
}
.cirkel:hover{
fill: yellow;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
-webkit-transition: fill, -webkit-transform
-moz-transition: fill, -webkit-transform
-ms-transition: fill, -webkit-transform
-o-transition: fill, -webkit-transform
transition: fill, -webkit-transform
-moz-transition-duration: 3s;
-ms-transition-duration: 3s;
-o-transition-duration: 3s;
transition-duration: 3s;
HTML
<circle class="cirkel" cx="245.929" cy="68.256" r="5.08" onmouseover="evt.target.setAttribute('r', '10');" onmouseout="evt.target.setAttribute('r', '5.08');"/>
I removed the onmouseover and onmouseout attributes from first two circle tags.
remove them and adjust scale accordingly
Here is the problem with the code bellow. I want to create zoom-like effect with css. I am adding the classes zoomIn or zoomOut with jquery on certain events, which is not important right now.
The problem is that in Chrome and Safari (webkit based) the zoom in and out start from 0. In firefox for instance the transition starts from the current image height and extends to 1160px in this case. The webkit browsers however seem to handle things different and start the transition from 0 to 1160px
I ain't got no clever way to solve this so please help
Cheers
The images have also a class of 'full'
.full {display:block;position:absolute;width:100%;top:0;left:0;}
.zoomIn{
top:0;left:0;
box-sizing: border-box;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
height: 1160px !important;
left: 50%;
margin-left: -960px !important;
margin-top: -670px !important;
top: 50%;
width: 1920px;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-ms-transform: scale(1.2);
}
.zoomOut {
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-moz-transform: scale(1);
margin-left: 0 ;margin-top: 0;
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-ms-transform: scale(1);
}
CSS looks as follows:
.rotate
{
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
}
.rotate:hover
{
-webkit-transform: rotate(90deg) scale(1);
-moz-transform: rotate(90deg) scale(1);
-o-transform: rotate(90deg) scale(1);
-ms-transform: rotate(90deg) scale(1);
}
Hovering over a <span class="rotate"> will rotate the element in Firefox but not chrome.
Demo: http://jsfiddle.net/BuHGQ/ (hover over the arrow)
What can be done so that it works in Chrome?
Try this:
.rotate { display: inline-block; }
http://jsfiddle.net/y7nfD/1/