There are three buttons. I want to arrange them in a circle. Is there a way to do it by putting them in the same div and then give some in div property, instead of giving the coordinates for each button? And how to make animations/ for example on clicking any button tha button should rotate and come to the top.
THIS IS THE STYLE
.Hfaraz {
background-color: #03F;
height: 100px;
width: 100px;
float: left;
}
.Hfaraz:hover{
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-moz-transform: rotate(45deg); /* Firefox */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-o-transform: rotate(45deg); /* Opera */
-webkit-transition: transform 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out;
-ms-transition: transform 0.3s ease-in-out;
-o-transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
THIS IS HTML
<div class="Hfaraz"></div>
<div class="Hfaraz"></div>
<div class="Hfaraz"></div>
Related
I'm making a hover effect on my website, where you hover images (pngs) and they grow in size. The problem i have is that they now get blurry when they resize.
The code that I'm using looks something like this:
.div {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: perspective(1000px) translate3d(0,0,1px);
transform: perspective(1000px) translate3d(0,0,0);
}
.div:hover {
-webkit-transform: perspective(100px) translate3d(0,0,1px);
transform: perspective(100px) translate3d(0,0,31px);
}
And you can see the effect on this jsfiddle: enter link description here
Is there a way to fix this?
I think scale would be more appropriate for this. This solution only blurs during scaling.
.square {
width:100px;
height: 100px;
background-color:black;
margin: 50px;
}
p {
color:white;
text-align: center;
padding-top: 35px;
}
.square {
-webkit-transition: -moz-transform .3s ease-out;
-moz-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
.square:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
<div class="square">
<p>Some text</p>
</div>
I have an issue , I have the following code I am using for increasing the scale using CSS3 transition , at the end it snaps back to its original scale after increasing.
CSS:
.big{
transition:all 0.3s ease-in-out;
display:inline;
}
.big:hover{
-webkit-transform:scale(1.4);
}
HTML :
<h1 class = "big">Typo</h1>
Try using inline-block instead of inline (also, it's recommended to add compatibility to the rest of the browsers as well).
CSS:
.big {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
display: inline-block;
}
.big:hover {
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}
HTML:
<h1 class="big">Typo</h1>
Test it here: http://jsfiddle.net/XbUC8/
I am trying to get figcaption caption to appear fade in/animate on hover on the bottom. But i cannot get the figcaption div tag seems to disappear off the screen.
I want it so that when you hover over the banner, the figcaption appears regardless over where the mouse is hovering over.
i have 4 elements:
- the background image
- gradient overlay
- description
- figcaption
the current code i have is: http://jsfiddle.net/fGF8E/
DEMO
.figcaption {
z-index: 4;
position: absolute;
height: 50px;
width: 100%;
bottom: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.landing-cover:hover .figcaption{
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
My problem is about choosing in CSS first or second image.
<div class="ao-preview">
<input type="checkbox" id="ao-toggle" class="ao-toggle" name="ao-toggle" />
<img src="img/local.png"/>
<img src="img/local_big.jpg"/>
</div>
CSS code
.ao-item img {
margin: 0 auto;
max-width: 100%;
display: block;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input.ao-toggle:checked +img{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
filter: alpha(opacity=99);
opacity: 1;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
input.ao-toggle:checked +img sets attributes for first image.
So the question is, how can I choose second image in that case? Because I want to make by one click one image disappear and another appear instead of first.
A more generic approach could be the use of nth-of-type pseudo class
.ao-toggle:checked + img:nth-of-type(1) {
//style for the 1st element here
}
.ao-toggle:checked + img:nth-of-type(2) {
//style for the 2nd element here
}
foo + img + img would be the image after the image after foo.
I'm having an issue in chrome with a css3 transform rotate transition. The transition is working fine but just after it finishes the element shifts by a pixel. The other strange thing is that it only happens when the page is centered (margin:0 auto;). The bug is still there if you remove the transition as well.
You can see it happening here:
http://jsfiddle.net/MfUMd/1/
HTML:
<div class="wrap">
<img src="https://github.com/favicon.ico" class="target" alt="img"/>
</div>
<div class="wrap">
<div class="block"></div>
</div>
CSS:
.wrap {
margin:50px auto;
width: 100px;
}
.block {
width:30px;
height:30px;
background:black;
}
.target,.block {
display:block;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
Comment out the margin:0 auto; line to make it go away.
Anyone have any ideas of how to stop this while keeping the page centered?
I'm using Version 24.0.1312.57 on OSX 10.6.8
Cheers
Actually just add this to the site container which holds all the elements:
-webkit-backface-visibility: hidden;
Should fix it!
Gino
I had the same issue, I fixed it by adding the following to the css of the div that is using the transition:
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
Backface is used for 3D-based transitions but if you are only using 2D there is no need for the extra stuff.
will-change: transform; on the element helped to me in 2022 (Chrome). No more 1px shift of the text inside the element after zoom animation.
there is something unusual in the relation between the body dimension and the structure of the transform. I don't in fact is because the fiddle iframe that contains the preview of the code.
Anyway, I will suggest this approach instead:
body{
width:100%;
float:left;
}
.wrap {
margin: 50px 45%;
width: 5%;
float: left;
}
.block {
width:30px;
height:30px;
background:black;
}
.target,.block {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
Here is the updated fiddle
For 3d transform use this instead:
-webkit-transform: perspective(1px) scale3d(1.1, 1.1, 1);
transform: perspective(1px) scale3d(1.1, 1.1, 1);