i am now studying css3 but not working class in css3 any one help me
<!DOCTYPE html>
<html>
<head>
<title>Zoom Hover</title>
<style type="text/css">
#-moz-keyframes 'zoom' {
0%{
height:200px;
width:200px;
}
100% {
width: 1000px;
height: 1000px;
}
}
#-webkit-keyframes 'zoom' {
0%{
height:200px;
width:200px;
}
100% {
width: 1000px;
height: 1000px;
}
}
.aaa{
width:200px;
height:auto;
}
.aaa:hover {
-moz-animation-name: 'zoom' 2s;
}
.aaa:hover {
-webkit-animation: 'zoom' 2s;
}
.aaa{
width:200px;
height:200px;
-moz-transition-duration: 2s; /* firefox */
-webkit-transition-duration: 2s; /* chrome, safari */
-o-transition-duration: 2s; /* opera */
-ms-transition-duration: 2s; /* ie 9 */
}
.aaa:hover {
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<div class="aaa"style="width:100px;height:100px;background:red;"></div>
</body>
</html>
is there any way to do this any one assist me please, is there any
website for css3 for learning?
If you really want to "zoom" an element using CSS you should use a transformation and scale it to the size you want:
transform: scale(2);
This will scale the element and all of its content by a factor of 2.
Here's a fully working example:
CSS
.test {
width: 100px;
height: 100px;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.test:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
Demo
Try before buy (using transform and scale)
What you tried to do, was to change the dimensions of an element. That won't actually zoom the element but make it larger. Child-elements are not affected by this. You can achieve this easier by using a transition instead of an animation:
CSS
.test:hover {
width: 200px;
height: 200px;
}
Demo
Try before buy (using transition)
Related
I have a pulsating css3 effect on a div, and I'd like it to have a hover effect that seamlessly blends with the pulse, I have a near finished JFiddle here:
https://jsfiddle.net/jnz7yfg0/
It's nearly there, but it's jerky when you hover over it, any ideas to make the animation smoother?
Many thanks!
Code here:
.orb {
width: 20px;
height: 20px;
border-radius: 10px;
background: #2fa4e7;
cursor: pointer;
opacity: 1;
-webkit-transform: scale(1);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#-webkit-keyframes pulsate {
0% { opacity: 1; }
50% { opacity: .4; -webkit-transform: scale(3); }
100% { opacity: 1; }
}
.orb {
-webkit-animation: pulsate 2s infinite;
}
.orb:hover {
width: 20px;
height: 20px;
border-radius: 10px;
background: #2fa4e7;
cursor: pointer;
opacity: 1;
-webkit-transition: all .2s ease-in-out;
-webkit-animation: pulsatehover 2s infinite;
}
#-webkit-keyframes pulsatehover {
0% { opacity: 1; }
50% { opacity: .4; -webkit-transform: scale(6); }
100% { opacity: 1; }
}
As far as I know, there is no way in CSS to chain or merge 2 animations.
You can however get the effect that you want changing the way it works
.container {
width: 80px;
height: 80px;
margin: 100px;
border: solid red 1px;
position: relative;
perspective: 800px;
transition: perspective 2s;
}
.container:hover {
perspective: 400px;
}
.obj {
position: absolute;
width: 100%;
height: 100%;
background: lightblue;
border-radius: 50%;
-webkit-animation: pulse 1s infinite alternate;
animation: pulse 1s infinite alternate;
}
#-webkit-keyframes pulse {
0% {transform: translateZ(0px)}
100% {transform: translateZ(200px)}
}
#keyframes pulse {
0% {transform: translateZ(0px)}
100% {transform: translateZ(200px)}
}
<div class="container">
<div class="obj">
</div>
</div>
The trick is to make the animation change the z position of the element.
Then , the zoom effect is achieved with the perspective property (in the parent).
A lower pespective makes the effect of the transform bigger. Notice that the animation is always the same, it's the visual effect that changes.
Also, the perspective is animatable, so you can make the transition smooth
I'm trying to implement go-out go-in effect using css animation.
I want the item to go back fast and than scale back to 1 slower.
Something like this:
div {
height: 200px;
width: 200px;
background-color: green;
border: 1px grey solid;
position: absolute;
-webkit-transition-property: -webkit-transform, -webkit-transform;
-webkit-transition-duration: 0.1s, 0.5s;
-webkit-transition-timing-function: ease-out, ease-in;
-webkit-transition-delay: 0, 0;
}
div:hover {
-webkit-transform: scale(0.5);
-webkit-transform: scale(1);
}
Any ideas?
As James said, try animation CSS3.
To get what you want, try with his code and this changes:
#-webkit-keyframes scale {
5% {
-webkit-transform: scale(0.5);
}
50% {
-webkit-transform: scale(1);
}
}
And add:
div:hover{
-webkit-animation: scale 5s ease-out;
}
Here the example: http://jsfiddle.net/7Cf8C/
If you want it to animate keyframes, your CSS needs to be:
div {
height: 200px;
width: 200px;
background-color: green;
border: 1px grey solid;
position: absolute;
}
div:hover {
-webkit-animation: scale 0.5s ease-in-out 0s;
-moz-animation: scale 0.5s ease-in-out 0s;
-o-animation: scale 0.5s ease-in-out 0s;
animation: scale 0.5s ease-in-out 0s;
}
#keyframes scale {
0% {}
50% {transform: scale(0.5)}
}
#-webkit-keyframes scale {
0% {}
50% {-webkit-transform: scale(0.5)}
}
#-moz-keyframes scale {
0% {}
50% {-moz-transform: scale(0.5)}
}
#-ms-keyframes scale {
0% {}
50% {-ms-transform: scale(0.5)}
}
#-o-keyframes scale {
0% {}
50% {-o-transform: scale(0.5)}
}
Though, you can use the transition property too, but not as flexible as keyframes.
div {
height: 200px;
width: 200px;
background-color: green;
border: 1px grey solid;
position: absolute;
-webkit-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
div:hover {
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
You really should look up articles online that discuss CSS3 animation. There is literally thousands of them with great detail.
Don't forget you need to support all browsers by using prefixes.
These are:
-webkit-, -moz- and -o-. Sometimes you might need -ms- for IE. You must write animations without prefixes too. This is to support IE and most latest versions of browsers that no longer require the prefixed tags.
Here's a DEMO of what you want with Keyframes.
Here's a DEMO of what you want with the hover pseudo selector.
Also be aware of the support. Though, I wouldn't worry too much about it if you follow the last two versions rule (aimed at IE, cough cough).
CanIUse CSS3 Animation
I am trying to implement the "fade out" effect in pure CSS. Here is the fiddle. I did look into a couple of solutions online, however, after reading the documentation online, I am trying to figure out why the slide animation would not work. Any pointers?
.dummy-wrap {
animation: slideup 2s;
-moz-animation: slideup 2s;
-webkit-animation: slideup 2s;
-o-animation: slideup 2s;
}
.success-wrap {
width: 75px;
min-height: 20px;
clear: both;
margin-top: 10px;
}
.successfully-saved {
color: #FFFFFF;
font-size: 20px;
padding: 15px 40px;
margin-bottom: 20px;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #00b953;
}
#keyframes slideup {
0% {top: 0px;}
75% {top: 0px;}
100% {top: -20px;}
}
#-moz-keyframes slideup {
0% {top: 0px;}
75% {top: 0px;}
100% {top: -20px;}
}
#-webkit-keyframes slideup {
0% {top: 0px;}
75% {top: 0px;}
100% {top: -20px;}
}
#-o-keyframes slideup {
0% {top: 0px;}
75% {top: 0px;}
100% {top: -20px;}
}
<div class="dummy-wrap">
<div class="success-wrap successfully-saved">Saved</div>
</div>
Here is another way to do the same.
fadeIn effect
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
fadeOut effect
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
UPDATE 1:
I found more up-to-date tutorial CSS3 Transition: fadeIn and fadeOut like effects to hide show elements and Tooltip Example: Show Hide Hint or Help Text using CSS3 Transition here with sample code.
UPDATE 2: (Added details requested by #big-money)
When showing the element (by switching to the visible class), we want the visibility:visible to kick in instantly, so it’s ok to transition only the opacity property. And when hiding the element (by switching to the hidden class), we want to delay the visibility:hidden declaration, so that we can see the fade-out transition first. We’re doing this by declaring a transition on the visibility property, with a 0s duration and a delay. You can see a detailed article here.
I know I am too late to answer but posting this answer to save others time.
You can use transitions instead:
.successfully-saved.hide-opacity{
opacity: 0;
}
.successfully-saved {
color: #FFFFFF;
text-align: center;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-ms-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
opacity: 1;
}
Since display is not one of the animatable CSS properties.
One display:none fadeOut animation replacement with pure CSS3 animations, just set width:0 and height:0 at last frame, and use animation-fill-mode: forwards to keep width:0 and height:0 properties.
#-webkit-keyframes fadeOut {
0% { opacity: 1;}
99% { opacity: 0.01;width: 100%; height: 100%;}
100% { opacity: 0;width: 0; height: 0;}
}
#keyframes fadeOut {
0% { opacity: 1;}
99% { opacity: 0.01;width: 100%; height: 100%;}
100% { opacity: 0;width: 0; height: 0;}
}
.display-none.on{
display: block;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
animation-fill-mode: forwards;
}
This is the working code for your question.
Enjoy Coding....
<html>
<head>
<style>
.animated {
background-color: green;
background-position: left top;
padding-top:95px;
margin-bottom:60px;
-webkit-animation-duration: 10s;animation-duration: 10s;
-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
#-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
#keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
</style>
</head>
<body>
<div id="animated-example" class="animated fadeOut"></div>
</body>
</html>
You forgot to add a position property to the .dummy-wrap class, and the top/left/bottom/right values don't apply to statically positioned elements (the default)
http://jsfiddle.net/dYBD2/2/
.fadeOut{
background-color: rgba(255, 0, 0, 0.83);
border-radius: 8px;
box-shadow: silver 3px 3px 5px 0px;
border: 2px dashed yellow;
padding: 3px;
}
.fadeOut.end{
transition: all 1s ease-in-out;
background-color: rgba(255, 0, 0, 0.0);
box-shadow: none;
border: 0px dashed yellow;
border-radius: 0px;
}
demo here.
This may help :-
<!DOCTYPE html>
<html>
<head>
<style>
.cardiv{
height:200px;
width:100px;
background-color:red;
position:relative;
text-align:center;
overflow:hidden;
}
.moreinfo{
height:0%;
transition: height 0.5s;
opacity:1;
position: absolute;
bottom:0px;
background-color:blue;
}
.cardiv:hover .moreinfo{
opacity: 1;
height:100px;
}
</style>
</head>
<body>
<div class="cardiv">
<div class="moreinfo">Hello I am inside div</div>
</div>
</body>
</html>
Use the forwards fill-mode in CSS for it to remain on the last part of the animation.
I suggest using transform: tranlsateY(-20px); instead of using css positions, but if you insist of using it then set the .dummy-wrap position into absolute
.dummy-wrap {
animation: slideup 2s forwards;
-moz-animation: slideup 2s forwards;
-webkit-animation: slideup 2s forwards;
-o-animation: slideup 2s forwards;
position: absolute;
}
#keyframes slideup {
0% {
top: 0px;
}
75% {
top: 0px;
}
100% {
top: -20px;
}
}
<div class="dummy-wrap">
<div class="success-wrap successfully-saved">Saved</div>
</div>
You can remove element from the page via Position Absolute;
then:
transform: translateX(-200vw);
opacity: 0;
transition: opacity 0.2s;
transition-delay: 200ms;
then when you want element to appear, use this class:
opacity: 1;
transform: translateX(0px);
logic here is that: Transform -> removes/places element into the view INSTANTLY; while opacity takes care of the Fade In / Out effects
We also added slight delay with transiton-delay, to make it little bit better
NOTE: if you don't like TranslateX, you can replace it with scale(0); scale(1) -> to make element appear and disappear instantly
After looking through IE10's developer blog I have found that they do not support the preserve-3d setting.
They do offer a workaround, but I can not seem to get it working. My example below works in Safari, Chrome and Firefox but not IE10. If anyone could help me achieve this I would be very thankful.
The boxes should rotate around the Y axis on click to show some text and a green background color. This is not the case in IE10
My example: http://codepen.io/2ne/pen/zEpge
Part of code:
HTML
<div class="flip-wrapper">
<div class="front"></div>
<div class="back">IE10 SUCKS</div>
</div>
CSS
.flip-wrapper {
cursor: pointer;
height: 100%;
-moz-perspective: 1000;
-webkit-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
}
.flip-wrapper .front,
.flip-wrapper .back {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
height: 100%;
position: absolute;
width: 100%;
}
.flip-wrapper .back {
background: none repeat scroll 0 0 #298F68;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-wrapper.flipped {
cursor: default;
-webkit-animation: flip 500ms 1;
-moz-animation: flip 500ms 1;
animation: flip 500ms 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
2ne
I also couldn't seem to find a good example of this anywhere, so I spent some way too much time making my own.
This one works on all browsers, does not have that weird 360deg IE flip, and includes provision for static content (that lives on both sides of the card - which I needed to put a 'flip' button at the top right of both sides).
--I tested on latest versions of Chrome, Firefox, Safari, Opera, and IE.
http://jsfiddle.net/Tinclon/2ega7yLt/7/
Edit: Also works with transparent backgrounds: http://jsfiddle.net/Tinclon/2ega7yLt/8/
The css (of course) includes IE hacks, so it's a bit long, but the html is quite straightforward:
<div class="card">
<div class="content">
<div class="cardFront">FRONT CONTENT</div>
<div class="cardBack">BACK CONTENT</div>
<div class="cardStatic">STATIC CONTENT</div>
</div>
</div>
$('.card').hover(function(){$('.card').toggleClass('applyflip');}.bind(this));
.card {
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
margin:80px 150px;
width:320px;
height:243px;
vertical-align:top;
position:absolute;
display:block;
font-size:25px;
font-weight:bold;
}
.card .content {
transition: 0.5s ease-out;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
-ms-transition: 0.5s ease-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
/* content backface is visible so that static content still appears */
backface-visibility: visible;
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-o-backface-visibility: visible;
-ms-backface-visibility: visible;
border: 1px solid grey;
border-radius: 15px;
position:relative;
width: 100%;
height: 100%;
}
.card.applyflip .content {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.card .content .cardStatic {
/* Half way through the card flip, rotate static content to 0 degrees */
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
text-align: center;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
line-height:100px;
}
.card.applyflip .content .cardStatic {
/* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
transition: 0s linear 0.17s;
-webkit-transition: 0s linear 0.17s;
-moz-transition: 0s linear 0.17s;
-o-transition: 0s linear 0.17s;
-ms-transition: 0s linear 0.17s;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card .content .cardFront {
background-color: skyblue;
color: tomato;
}
.card .content .cardBack {
background-color: tomato;
color: skyblue;
}
.card .content .cardFront, .card .content .cardBack {
/* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: visible;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
line-height:200px;
border-radius: 14px;
}
.card .content .cardFront, .card.applyflip .content .cardFront {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
}
.card .content .cardBack, .card.applyflip .content .cardBack {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card .content .cardFront, .card.applyflip .content .cardBack {
/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: visible;
}
.card.applyflip .content .cardFront, .card .content .cardBack {
/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
animation: stayvisible 0.5s both;
-webkit-animation: stayvisible 0.5s both;
-moz-animation: stayvisible 0.5s both;
-o-animation: stayvisible 0.5s both;
-ms-animation: donothing 0.5s;
-ms-transition: visibility 0s linear 0.17s;
visibility: hidden;
}
#keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
#-ms-keyframes donothing { 0% { } 100% { } }
Here is a far simpler flip algorithm, which will also work in IE.
https://jsfiddle.net/mff4jzd2/8/
JAVASCRIPT:
var state = 0;
$('.container').on('click',function(){
if(state == 0){
state = 1;
$('.front').addClass('flip-front');
$('.back').addClass('flip-back');
}
else{
state = 0;
$('.front').removeClass('flip-front');
$('.back').removeClass('flip-back');
}
});
CSS:
.container{
width:170px;
height:280px;
display:inline-block;
position:relative;
transform: perspective(400px);
cursor:pointer;
}
.front{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:blue;
transform: perspective(400px) rotateY(0deg);
backface-visibility: hidden;
transition: 1.0s;
opacity:1;
box-shadow: 0 8px 6px -6px black;
}
.back{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:green;
transform: perspective(400px) rotateY(-180deg);
backface-visibility: hidden;
transition: 1.0s;
opacity:0;
box-shadow: 0 8px 6px -6px black;
}
.flip-front{
opacity:0;
transform: perspective(400px) rotateY(180deg);
}
.flip-back{
opacity:1;
transform: perspective(400px) rotateY(0deg);
}
HTML:
<div class="container">
<div class="back"></div>
<div class="front"></div>
</div>
Found the answer here. Posted my own updated fiddle here - this is the css (I included ms prefixes only for brevity):
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #CCC;
-ms-perspective: 1000;
perspective: 1000;
}
.card {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
transition: all 0.5s linear;
backface-visibility: hidden;
}
.card.flipped {
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
.front {
background: red;
}
.back {
background: #00f;
transform: rotateY( 180deg );
}
.container:hover .card {
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
Here is a button handler for flipping (in addition to the hover event):
$('button').click(function() {
$('.card').toggleClass('flipped');
});
Interesting (and somewhat troubling) that the answer for IE10 is flipping by 360 degrees (the 'flipped' class and hover event in the css). Still wrapping my head around that one.
Here's hoping they implement preserve-3d soon.
here is a very simple version of Nicholls
flipping rectangle
#container {
position: relative;
height:362px;
width: 282px;
margin: 0 auto;
}
#container div {
position:absolute;
left:0;
top:0;
width:242px;
height: 322px;
padding:20px;
background:#463;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
#container:hover div.upper {
-webkit-transform: perspective(800px) rotateY(179.9deg);
-moz-transform: perspective(800px) rotateY(179.9deg);
transform: perspective(800px) rotateY(179.9deg);
}
<div id="container" aria-haspopup="true">
<div class="upper"></div>
</div>
I left only the flip code.
Btw, great effects Nicholls !
Use a browser-determiner JS or any other method to apply CSS-styles to IE only.
Then use the following code:
.ie .flip-wrapper:hover .back {
-ms-backface-visibility: visible;
}
.ie .flip-wrapper:hover .front {
visibility: hidden;
}
As the OP notes, there is an answer to the question on their blog, but sadly he did not quote:
Note The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.
In summary, as normal, Microsoft's Browser is badly broken.
On further investigation, it seems that the interpolation engine is incomplete or broken in IE10; applying everything in terms of matrix transforms causes 'random' flips to occur when rotation about more than one axis is involved. The only method of matrix interpolation would be to manually handle all interpolation manually. Further, it seems that any interpolation where a right angle is involved will cause inconsistent 'random' flipping.
I have succeeded in interpolating the required css, however (minified), the code is thousands of lines long. So, yeah, IE can do 3d css, if you don't mind pre-compiling and long wait-times.
I'm trying to get the words "I'm available!" to slide out, from the left, of the little "+" image, when I hover my mouse over it. What I've found on Google just isn't helping.
Before -
What I want it to do on hover
I would also like to make that little "+" sign turn sideways when hovered over as well, but I think I have an idea on how to do that myself. Wouldn't mind the help though :)
If I could do all of these things with just CSS/HTML, that would be great. I know some jQuery, but I try to avoid it because CSS is just cleaner.
If you want it to rotate without using jquery just use the css3 animation properties:
This will make your plus icon rotate 360 deg when hovered
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
#-moz-keyframes rotate {
from
{
-moz-transform: rotate(360deg);
}
to {
-moz-transform: rotate(0deg);
}
}
.plusicon:hover
{
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 0.5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
You should also be able to use -webkit-transition-duration: 1s; to move your text out
So you want some sort of tooltip.
The html:
<a href="#">
<span>I'm available!</span>
</a>
The css:
a {
background: url(../path_to_image.png) 0 0 no-repeat; /*you allready have that part */
position: relative;
}
a span {
display: none;
position: absolute;
left: -10px;
top: 3px;
}
a:hover span {
display: block;
}
You can replace the <a> tag whit whatever you have there
HTML:
<div class="slidebtn">
<div class="icon">
<div class="text"><p>I'm Aviable</p></div>
</div>
</div>
CSS:
.slidebtn{
width:140px;
margin:auto;
overflow:hidden;
height:auto;
position:relative;
}
.text{
position:absolute;
width:100px;
float:Left;
margin-left:150px;
}
.icon{
background-image:url('http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/png/24x24/001_01.png');
width:24px;
height:24px;
float:right;
background-repeat: no-repeat;
background-position: right;
}
.icon:hover{
width:130px;
}
.icon:hover .text{
margin-left:0px;
}
DEMO
if you want use CSS3 transition change style like these
.text{
position:absolute;
width:100px;
float:Left;
margin-left:150px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
z-index:-1;
}
.icon{
background-image:url('http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/png/24x24/001_01.png');
width:24px;
height:24px;
float:right;
background-repeat: no-repeat;
background-position: right;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
DEMO 2