I use 3D roll links on my website using HTML5 and CSS3.
I'm used to make Modernizr available for IE and older browsers, but IE11 is detected as compatible with 3D css animation... and it's not.
On IE 11 :
expected :
actual result :
So the question is :
How can I use Modernizr on Internet Explorer 11? The goal is to use 3D Roll Links or fallback on non-animated CSS.
Here's my HTML's <head> :
<!--[if IE]>
<script src="js/modernizr.js"></script>
<![endif]-->
Here is the CSS I use :
/* ROLL LINKS */
.roll {
display: inline-block;
overflow: hidden;
vertical-align: top;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.roll:hover {text-decoration: none;}
.roll span {
display: block;
position: relative;
padding: 0 2px;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}
.roll:hover span {
background: #b1162c;
-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.roll span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 0;
padding: 0 2px;
color: #fff;
background: #b1162c;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
There's a CSS trick to have a fallback with 3D Roll Links on incompatible browser. Add this to your CSS :
/* no 3d transform fix */
.no-csstransforms3d .roll span:after {
display:none;
}
.no-csstransforms3d .roll:hover span {
color:#fff;
background:#b1162c;
}
.no-csstransforms3d .roll:hover span {
-webkit-transform:none;
-moz-transform:none;
-o-transform:none;
transform: none
}
/* ie10 fix */
.no-cssreflections .roll span:after {
display:none;
}
.no-cssreflections .roll:hover span {
color:#fff;
background:#b1162c;
}
.no-cssreflections .roll:hover span {
-webkit-transform:none;
-moz-transform:none;
-o-transform:none;
transform: none
}
As you can see, you'll need Modernizr to activate this fallback, which is just a colored link. And while the [if IE] method works for Internet Explorer 8, 9, 10... it won't work on IE11. Because Microsoft thought their browser could now handle "modern" coding (and ooooh they were wrong).
So, the trick is to use javascript to load the modernizr.js if the browser is IE11. Just add this to your HTML's <head> :
<script type="text/javascript">
if(window.ActiveXObject || "ActiveXObject" in window){
<!--
var n='<script src="js/modernizr.js">';
var d='<\/script>';
document.write(n + d); //
-->
}
</script>
This will write the HTLM page differently if IE11 is detected, by adding <script src="js/modernizr.js"></script> to the code. It's simply a more difficult [if IE].
If you combine your previous CSS and HTML to this CSS fallback and this javascript for IE11 detection, you'll be fine.
Related
I have a website with a header image ( 3279 x 710 px ) and I added a Ken Burns effect to it, but it seems like it is distorted. I made a fiddle with a test image, but i can't reproduce the distorted effect, however it has something to do with it's aspect ratio. The Image looks like it's pressed together.
Right now i tried to fix it with width set to auto and height to 100%, but I can't get it to work.
I made a fiddle here.
HTML
<div id="header-wrapper" class="wrapper">
<img src='http://eventzerz.com/wp-content/uploads/2018/03/Test-Logo-Small-Black-transparent-1.png' class='image-kenburns'>
<div id="header">
</div>
</div>
CSS
#header-wrapper {
background: transparent;
padding: 0;
}
.wrapper {
padding: 6em 0 9em 0;
}
.wrapper .title {
font-size: 0.9em;
width: 25em;
/*
height: 3.25em;
*/
height: 3.4em;
top: -3.25em;
line-height: 3.25em;
margin-bottom: -3.25em;
margin-left: -12.5em;
padding-top: 0.5em;
}
#header {
position: relative;
padding: 12em 0;
}
.homepage #header {
padding: 18em 0;
}
.image-kenburns {
overflow: hidden;
position: absolute;
z-index: -1;
animation: move 40s ease-in infinite;
height: 100%;
width: 100%;
}
#keyframes move {
0% {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom right;
transform: scale(1.0);
-ms-transform: scale(1.0);
-webkit-transform: scale(1.0);
-o-transform: scale(1.0);
-moz-transform: scale(1.0);
}
50% {
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
}
100% {
transform: scale(1.0);
-ms-transform: scale(1.0);
-webkit-transform: scale(1.0);
-o-transform: scale(1.0);
-moz-transform: scale(1.0);
}
}
EDIT: I should mention that it's fine looking on desktop, what I need is the responsive version for tablets.
If you need your image to resize proportionally / keep the aspect ratio just add to your .image-kenburns class height: auto
I am stuck at the following problem.
On this site that I created, I have a gallery which is located on the bottom of the page. If I hover over the thumbs, they fly around like crazy which is not what I want. It works like a charm on other browsers; only Microsoft Edge is affected.
Can someone help me out to get the images to behave as expected?
The CSS looks like this:
.node-gallery {
float: left;
width: 150px;
height: 150px;
position: relative;
margin: 0 60px 50px 0;
}
.node-gallery img {
position: absolute;
bottom: 0px;
}
.node-gallery .image1 {
left: 0px;
z-index: 3;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease
}
.node-gallery .image2 {
left: 7px;
height: 148px;
z-index: 2;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease
}
.node-gallery .image3 {
left: 14px;
height: 145px;
z-index: 1;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease
}
.image1, .image2, .image3 {
border: 5px solid #F3F3F3!important;
box-shadow: 1px 1px 2px #666;
-webkit-shadow: 1px 1px 2px #666;
-webkit-transform: rotate(0deg) translate(0px);
}
.node-gallery:hover .image1 {
z-index: 6;
-ms-transform: rotate(-5deg) translate(-20px, -2px);
-ms-transform-origin: center bottom;
-webkit-transform: rotate(-5deg) translate(-20px, 2px);
-webkit-transform-origin: center bottom;
-moz-transform: rotate(-5deg) translate(-20px, -2px);
-moz-transform-origin: center bottom;
-o-transform: rotate(-5deg) translate(-20px, -2px);
-o-transform-origin: center bottom;
}
.node-gallery:hover .image2 {
z-index: 5;
-ms-transform: rotate(-2deg) translate(0px, 2px);
-ms-transform-origin: center bottom;
-webkit-transform: rotate(-2deg) translate(0px, -2px);
-webkit-transform-origin: center bottom;
-moz-transform: rotate(-2deg) translate(0px, 2px);
-moz-transform-origin: center bottom;
-o-transform: rotate(-2deg) translate(0px, 2px);
-o-transform-origin: center bottom;
}
.node-gallery:hover .image3 {
z-index: 4;
-ms-transform: rotate(5deg) translate(20px, -2px);
-ms-transform-origin: center bottom;
-webkit-transform: rotate(5deg) translate(20px, 2px);
-webkit-transform-origin: center bottom;
-moz-transform: rotate(5deg) translate(20px, -2px);
-moz-transform-origin: center bottom;
-o-transform: rotate(5deg) translate(20px, -2px);
-o-transform-origin: center bottom;
}
Few months late on this, but I believe I just encountered this same bug and found a solution. It seems like Microsoft Edge 13 has a problem interpreting some normally acceptable values for transform-origin. Specifically for me, it was ignoring the value right center, but working fine with top left, leading me to believe the center value (which I see in your example code) might be the issue.
The fix for me was to use percentage values, so transform-origin: center bottom would become transform-origin: 50% 100%. Hope this helps anyone else who encounters this issue.
Note that despite the top-voted answer suggesting the ms- prefix, this question is about the recent MS Edge browser, and that prefix has not been required since Internet Explorer 9 for the transform property (per caniuse.com).
Ed. by another user: This answer does not apply to the Microsoft Edge browser.
You need to write the standard transition and transform properties, and then the -ms prefix for microsoft internet explorer:
.selector {
-webkit-transform: scale(); /* android, safari, chrome */
-moz-transform: scale(); /* old firefox */
-o-transform: scale(); /* old opera */
-ms-transform: scale(); /* old IE */
transform: scale(); /*standard */
}
The same in transition property. Your solution is to write the standard.
I found some differences:
When I try rotate (transform) element with display:inline, that not work in EDGE.
But, when I use display: inline-block then transform works.
Just try this (in MS EDGE):
<style>
#good span { display: inline-block; transform: rotate(-10deg); }
#bad span { transform: rotate(-10deg); }
</style>
<div id="good"><span>WELCOME</span></div>
<div id="bad"><span>WELCOME</span><div>
Try do to this,
Your gallery images using the fancybox API.SO there is option for change the animation types in fancybox.js.
Reference:http://fancybox.net/api
You need to go fancybox js file,find 'transitionIn, transitionOut' change to effect of The transition type. Can be set to 'elastic', 'fade' or 'none'.
According to the windows all browsers will be fine.
On safari 5.1.7 for windows, some rotated elements are cutting through others elements:
While on other browsers Firefox, Chrome, IE I get:
Is there a way to avoid the 'cutting' issue on safari ?
A jsfiddle showing the issue here.
css:
.myFlip {
width: 310px;
margin: 20px auto;
-moz-perspective: 780px;
-webkit-perspective: 780px;
perspective: 780px;
}
.myFlip li {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
margin-right: -70px;
}
.test1 {
background-color:green;
z-index: 30;
-moz-transform: rotateY(0deg) scale(1.2);
-webkit-transform: rotateY(0deg) scale(1.2);
transform: rotateY(0deg) scale(1.2);
}
.test2 {
background-color:black;
z-index: 10;
-moz-transform: rotateY(45deg);
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
html:
<ul class="myFlip">
<li class="test1"></li>
<li class="test2"></li>
</ul>
In most cases, z-index does not apply to an element that does not have a 'position' attribute. Try this
For instance :
position:relative;
z-index: 10;
I don't have a Safari browser to test it in.
Found the following:
By using rotateY we are adding a new dimension to our 2D classic output.
In this browser z-index don't work in 3D.
There is however a way to solve my issue:
.test1 {
background-color:green;
z-index: 30;
-moz-transform: rotateY(0deg) scale(1.2);
-webkit-transform: rotateY(0deg) scale(1.2) translate3d(0, 0, 50px);
transform: rotateY(0deg) scale(1.2);
}
By applying translate3d to .test1 the green and the black block are no more on the same z plan.
test1 is on the z plan where z=50px ( without translate3d it was on z=0px )
test2 is an 'Oblique' plan somewhere bettween -50px<z<50px
This question already has answers here:
Spin or rotate an image on hover
(5 answers)
Closed 7 years ago.
I created an simple website:
So there is an circle above an image, i tried to rotate it on hover, but it simply wont worked! Heres my code!
<div class="image" id="landkreis">
<img src="reg.png" alt="" width="100%" height="auto" />
<span id="motha2">
<h6><br>Here<br>i am</h6>
</span>
</div>
h6 {text-align:center;
color:#f2f2f2;
font-size: 75px;
line-height: 74px;
font-weight:700;
margin: 0 5px 24px;
font-family: 'Route';}
#motha2 {
position: absolute;
top: 1px;
left: 15%;
width: 300px;
height:300px;
border-radius: 150px;
background-color:#4ec461 ; }
h6:hover {transform:rotate(-90deg);}
UPDATEUPDATE!!!!!!!!!!!!!!!!!!!!!!!!!!
Ok the transition works but how can i make the hole transition smooth and that for examle it first rotates -15deg an then to 15deg and stops finally at 0deg?
If you need "rotates -15deg an then to 15deg and stops finally at 0deg"
You have to change
h6:hover {transform:rotate(-90deg);}
to
h6:hover {
-moz-animation-name: rotate 1s linear 1;
-webkit-animation-name: rotate 1s linear 1;
animation-name: rotate 1s linear 1;
}
#-moz-keyframes rotate {
0%, 100% {-moz-transform: rotate(0deg);}
33% {-moz-transform: rotate(15deg);}
66% {-moz-transform: rotate(-15deg);}
}
#-webkit-keyframes rotate {
0%, 100% {-webkit-transform: rotate(0deg);}
33% {-webkit-transform: rotate(15deg);}
66% {-webkit-transform: rotate(-15deg);}
}
#keyframes rotate {
0%, 100% {transform: rotate(0deg);}
33% {transform: rotate(15deg);}
66% {transform: rotate(-15deg);}
}
Have you tried using the prefixes?
The browser implementation is sometimes slightly different for new CSS properties. That's why there are a couple of prefixes used by the different browser engines.
h6:hover {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform : rotate(-90deg);
}
See caniuse.com for more information.
DEMO
CSS:
div{
border-radius:50%;
width:200px;
height:100px;
background-color:green;
text-align:center;
}
.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);
}
#motha2:hover {
position: absolute;
top: 1px;
left: 15%;
width: 300px;
height:300px;
border-radius: 150px;
background-color:#4ec461 ;
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-ms-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform : rotate(7deg);
}
Try this http://jsfiddle.net/VbZCX/
Here is the working DEMO http://jsfiddle.net/4wLpE/1/
But in this example its not ratating continuously. if you want so, let me know.
remove h6:hover
add
#motha2:hover {
cursor:pointer;
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
}
Your example was working fine for me in firefox however it could be a browser issue. What browser you are on is very dependaent on what css3 code you can use. Also using browser prefix's might also help.
Take a look at my example here http://jsfiddle.net/yJH4W/1/ it seems to work on most modern browsers. If it doesnt work for you it could be because you are on a older browser that does not support it . To see what you can use a good site is caniuse.com
h6:hover {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform : rotate(-90deg);
}
h6 {text-align:center;
color:#f2f2f2;
font-size: 75px;
line-height: 74px;
font-weight:700;
margin: 0 5px 24px;
font-family: 'Route';
-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;
- See more at: http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html#sthash.r0C3747t.dpuf
}
#motha2 {
position: absolute;
top: 1px;
left: 15%;
width: 300px;
height:300px;
border-radius: 150px;
background-color:#4ec461 ; }
h6:hover { -webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
- See more at: http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html#sthash.r0C3747t.dpuf}
Here you have it working for Chrome: Chrome test
h6 {text-align:center;
color:#f2f2f2;
font-size: 75px;
line-height: 74px;
font-weight:700;
margin: 0 5px 24px;
font-family: 'Route';
display: block;
}
#motha2 {
position: absolute;
top: 1px;
left: 15%;
width: 300px;
height:300px;
border-radius: 150px;
background-color:#4ec461 ; }
#motha2:hover {-webkit-transform:rotate(-90deg);}
For other browsers: http://davidwalsh.name/css-transform-rotate
Smoother.... Test in Chrome
#motha2:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(90deg);}
}
I did tried it on button and should work on Images too..This is what you just need.
note: this code just uses CSS and HTML to make what you want.
input#round{
width:100px; /*same as the height*/
height:100px; /*same as the width*/
background-color:#05B7FF;
border:1px solid #05B7FF; /*same colour as the background*/
color:#fff;
font-size:1.6em;
/*initial spin*/
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/*set the border-radius at half the size of the width and height*/
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
/*give the button a small drop shadow*/
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
box-shadow: 2px 2px 15px rgba(0,0,0, .75);
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-o-transition-property:width,height,-o-transform,background,font-size,opacity,color;
-o-transition-duration:1s,1s,1s,1s,1s,1s,1s;
-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color;
-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
display:inline-block;
}
/***NOW STYLE THE BUTTON'S HOVER STATE***/
input#round:hover{
background:#007DC5;
border:1px solid #007DC5;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
It has several other beautiful features like pushed effect.Worth trying.Gracious.
note: You can edit transition duration and then another animation.Its you call.
It's been many a year since I used css (there was no such thing as css3 at the time) so I'm struggling to understand how, on the following page;
http://www.webdesignerdepot.com/2013/01/how-to-build-a-threaded-comment-block-with-html5-and-css3/
The red links do a sort of flip maneuver on hover, I've tried deciphering the underlying css with 'inspect element' but it's like spaghetti, I tried pasting the class in to my file and assigning it with little in the way of results.
Is there a formal name for this effect, or can anyone give me an idea as to how it can be replicated?
Thanks in advance.
class "roll-link" is doing the magic here. The transition and transform properties are doing the cool effects. When you see -webkit- and -moz- and others that means it is for those browsers because the properties are not standard yet but some browsers want to support them anyway.
/* ROLL LINKS */
.roll-link {
display: inline-block;
overflow: hidden;
vertical-align: top;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.roll-link:hover {text-decoration:none;}
.roll-link span {
display: block;
position: relative;
padding: 0 2px;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
transition: all 400ms ease;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.roll-link:hover span {
background: #DD4D42;
-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.roll-link span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 0;
padding: 0 2px;
color: #fff;
background: #DD4D42;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
This part for example:
.roll-link:hover span {
background: #DD4D42;
-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
This means that span elements inside an element with the roll-link class when hovered on will apply these styles, but will cease application of these styles when not hovering on them.
The CSS transform property is a little complicated, having several parts. A lot of guys here do not like w3schools but they are a good starting point for introductory education. http://www.w3schools.com/cssref/css3_pr_transform.asp
Following is the code responsible for the rotation:
-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
Here is a working JSFiddle