I am trying to develop a dynamic chevron style progress indicator in a web resource.
Here is a jsfiddle of what I am trying to achieve http://jsfiddle.net/3qYyV/
My problem is that when this is put into a web resource the "transform skew's" do not get applied???
Here is an example web resource...
<html>
<head>
<title></title>
<style type="text/css">
.chevron {
float: left;
padding: 0px 0px 0px 2px;
width: 150px;
}
.chevron_a {
height: 100px;
width: 150px;
-webkit-transform: skew(20deg, 0deg);
-moz-transform: skew(20deg, 0deg);
-ms-transform: skew(20deg, 0deg);
-o-transform: skew(20deg, 0deg);
transform: skew(20deg, 0deg);
float: left;
z-index: -1;
}
.chevron_b {
height: 100px;
width: 150px;
-webkit-transform: skew(-20deg, 0deg);
-moz-transform: skew(-20deg, 0deg);
-ms-transform: skew(-20deg, 0deg);
-o-transform: skew(-20deg, 0deg);
transform: skew(-20deg, 0deg);
float: left;
z-index: -1;
}
.chevron_c {
margin-left: auto;
margin-right: auto;
width: 150px;
text-align: center;
font-family: Tahoma;
}
.chevron_m {
display: table-cell;
vertical-align: middle;
}
.chevron_o{
clear: both;
display: table;
position: absolute;
width: 150px;
height: 100px;
}
</style>
</head>
<body>
<div id="chevron_w">
<div class="chevron">
<div class="chevron_a" style="background: #CCCEEE;"></div>
<div class="chevron_b" style="background: #CCCEEE;"></div>
<div class="chevron_o">
<div class="chevron_m">
<div class="chevron_c">TEST</div>
</div>
</div>
</div>
</div>
</body>
Have you loaded your CSS as a separate web resource and referenced it from within your HTML?
http://msdn.microsoft.com/en-us/library/gg309536.aspx
Everything seems to be OK.
Adding CSS to the html Page in head Section will work fine.
Two more thing: Where are you using the Webrescource ??
If you are using the web-resource on IFRame then make sure the JQuery library is added to
the form.
Copy paste the URL of ur Web-Resource in the Internet Explorer and check in the developer tools. Your CSS, Divs, Jquery are working fine no error are being thrown in the console.
Well, It looks like I have found the answer...
Rollup 11 doesn't support CSS3 (i think). With Rollup 11 installed the following meta tag forces IE9+ into IE8 mode and thus ignores the transform skew style.
<META http-equiv=X-UA-Compatible content=IE=8>
Rollup 16 doesn't have this meta tag and the transform skew works fine in IE9+. I'm guessing this came as part of the cross browser compatability released with rollup 12???
Related
im triying to center this element in the screen, and also when i hover.
In my example below, the div is not centred, even when i hover it knowing that i made the transform 50% and top/left too, that's what i use uselly to center an element.
* {
box-sizing: border-box;
}
body {
position: relative }
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
transform: scale(.2) translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
.zoom:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="zoom"></div>
</body>
</html>
the bug is in :hover selector because without translate() inside the transform, you basically reset it to 0 which isn't what you want.
because it will forget what was before and override it.
here is a simple solution here:
❌
.zoom:hover {
transform: scale(1.5);
}
✅
.zoom:hover {
transform:
scale(1.5)
translate(-50%, -50%); /* add this */
}
here is a simple explanation here:
Modern solution (less code):
using CSS grid https://developer.mozilla.org/en-US/docs/Web/CSS/grid
with place-items it will center it automatically without the need for any transform or position... https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
also, you don't have to 0.2 the scaling at the start, just start at scale(1) and then make it bigger with a bigger scale in hover like 4 for example. (so it won't create that bug at the start of from 200px to 0.2scale transition without any hover)
however, if you want to make the CSS work also in IE and older browsers then is good to use position, and translate, top, left...
but your users are using a modern browser, so for readability and making a simpler use of flexbox or grid can be a great idea.
for any further info use https://caniuse.com (for example grid is 95% supported by any browser from 2020 one, and in chrome from 2017)
here the CSS grid solution
html,
body {
height: 100%;
}
body {
display: grid;
place-items: center;
margin: 0;
}
.zoom {
background-color: green;
width: 50px;
height: 50px;
transition: transform 0.2s;
}
.zoom:hover {
transform: scale(4);
}
<body>
<div class="zoom"></div>
</body>
Keep in mind the order of the transforms determines how the element appears. You first move the element top: 50%; left: 50%;, which puts it in the bottom right quadrant. Then you make it smaller transform: scale(0.2) and then you move it left by 50% of its now smaller size translate(-50%, -50%).
By placing the translate first, the element is centered before becoming smaller. Remember to also include the translate(-50%, -50%) when you increase the size, as the consequent translates will overwrite the current one, not add to it.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
position: relative }
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
transform: translate(-50%, -50%) scale(.2);
position: absolute;
top: 50%;
left: 50%;
}
.zoom:hover {
-ms-transform: translate(-50%, -50%) scale(1.5); /* IE 9 */
-webkit-transform: translate(-50%, -50%) scale(1.5); /* Safari 3-8 */
transform: translate(-50%, -50%) scale(1.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="zoom"></div>
</body>
</html>
Put translate(-50%, -50%) before scale(0.2). Also, you need to include the translate(-50%, -50%) in your hover rule, otherwise it scales, but resets the translate part to its default.
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
body {
position: relative
}
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s;
width: 200px;
height: 200px;
margin: 0 auto;
transform: translate(-50%, -50%) scale(0.2);
position: absolute;
top: 50%;
left: 50%;
transform-origin: center;
}
.zoom:hover {
-ms-transform: translate(-50%, -50%) scale(1.5);
/* IE 9 */
-webkit-transform: translate(-50%, -50%) scale(1.5);
/* Safari 3-8 */
transform: translate(-50%, -50%) scale(1.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="zoom"></div>
</body>
</html>
I've got an image which will scale on hover. However, at the same time the image get's translated to -50% on both the X and Y axis, or in some cases, only on the X axis.
Is there a way to inherit the previous transform while still changing one of the values?
.container {
position: relative;
height: 400px;
width: 640px;
overflow: hidden;
}
img {
-webkit-transform: translate(-50%,-50%) scale(1);
transform: translate(-50%,-50%) scale(1);
position: absolute;
top: 50%;
left: 50%;
transition: 500ms;
}
img.special {
-webkit-transform: translateX(-50%) scale(1);
transform: translateX(-50%) scale(1);
top: 0;
}
img:hover {
-webkit-transform: translate(-50%, -50%) scale(1.1);
transform: translate(-50%, -50%) scale(1.1);
}
<div class="container">
<img src="http://www.lorempixel.com/640/400/nature" alt="test image" />
</div>
<div class="container">
<img src="http://www.lorempixel.com/640/400/abstract" class="special" alt="test image" />
</div>
TL:DR;
Is there a way to inherit the original transform settings, while still changing one of the values?
I'm not looking for answers adding extra css, classes or whatever. I'm just looking for a way to keep this as short as possible. I've already solved this using extra classes and CSS.
Is there a way to inherit the original transform settings, while still changing one of the values?
No, there is no way to do this in CSS. CSS transform property declarations (like all other properties) are not additive. The latest setting (or) the one which is more specific will completely override anything else specified and hence there is no chance to inherit some values and add on top of it.
The only alternative with pure CSS is to add an extra wrapper and apply one of the transforms to it. In this way, the img:hover styling (the scale) need not be repeated and can be left as common for all.
.container {
position: relative;
height: 400px;
width: 640px;
overflow: hidden;
}
.wrapper {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
.special.wrapper {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: 0;
}
.wrapper img {
transition: 500ms;
}
img:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<div class="container">
<div class="wrapper">
<img src="http://www.lorempixel.com/640/400/nature" alt="test image" />
</div>
</div>
<div class="container">
<div class="wrapper special">
<img src="http://www.lorempixel.com/640/400/people" alt="test image" />
</div>
</div>
The other way would be to use JavaScript, find out what is the current transform on the element, then append the extra transform on hover and apply it via inline styles.
Hello ive managed to create a star with css but it is hiding the field that i wat to show on front of the star. I was wondering if anyone coud point me i the right direction to what i should do to fix it. thanks
<div class="views-field views-field-field-freebetamount">
<div class="field-content">
<div id="star12">£200</div>
</div>
</div>
css
.views-field-field-freebetamount {
color:white;
}
#star12 {
background: blue;
width: 40px;
height: 40px;
position: relative;
}
#star12:before, #star12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: blue;
}
#star12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#star12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
the freebetamount field should hopefully appear on top of the star. my limited css skills has lead me to try z-indexs but to no avail.
Anyone?
thanks
you have to define the negative z-index value in :before and :after pseudo element.
#star12 {
background: blue;
width: 40px;
height: 40px;
position: relative;
font-size:1.3em;
}
#star12:before, #star12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: blue;
z-index:-1;
}
Check the Demo.
With css u need to set z-index: 100 or something like that to place something on top of the others
You're going to want to take a look at z-index. Whichever element you want to appear on top of another needs to have a higher CSS z-index number.
in css file;
#yourID {
z-index: 99;
}
I'm trying to draw a cuboid with css (like this http://upload.wikimedia.org/wikipedia/commons/d/dc/Cuboid.png but ONLY 3 visible faces needed)
Lots of stuff checked, but nothing found exactly :S
Can anyone help?
SOLVED. The code is:
<style>
#cubetop {
width: 200px;
height: 40px;
background: green;
-webkit-transform:
translateX(20px)
skew(-45deg, 0deg);
}
#cubeface {
width: 200px;
height: 60px;
background: yellow;
display:block;
float:left;
}
#cuberight {
width: 40px;
height: 60px;
background: navy;
display:block;
float:left;
-webkit-transform:
translateY(-20px)
skew(0deg, -45deg);
}
</style>
<div id="cubetop"></div>
<div id="cubeface"></div>
<div id="cuberight"></div>
If you're ok with css3, you can use transforms. Have 3 separate div elements and apply the transformations on each.
Something like this in Mozilla
-moz-transform: rotate(15deg)
translateX(230px)
scale(1.5);
And Like this in IE
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.4488887394336025, M12=-0.388228567653781, M21=0.388228567653781, M22=1.4488887394336025, SizingMethod='auto expand')";
Alternatively try :
http://www.useragentman.com/tests/cssSandpaper/cube3.html
I am performing a CSS transform: rotate on a parent, yet would like to be able to negate this effect on some of the children - is it possible without using the reverse rotation?
Reverse rotation does work, but it affects the position of the element, and it may have a negative performance impact (?). In any case, it doesn't look like a clean solution.
I tried the "transform: none" suggestion from this question prevent children from inheriting transformation css3, yet it simply doesn't work - please see the fiddle here: http://jsfiddle.net/NPC42/XSHmJ/
May be you have to write like this:
.child {
position: absolute;
top: 30px;
left: 50px;
background-color: green;
width: 70px;
height: 50px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
}
Check this for more http://jsfiddle.net/XSHmJ/1/
Updated:
You can use:after & :before psuedo class for this.
check this http://jsfiddle.net/XSHmJ/4/
I believe that you are going to need to fake it using a second child, the specification does not seem to allow for the behavior you would like, and I can understand why the position of a child element has to be affected by a transform to its parent.
This isn't the most elegant of solutions, but I think you're trying to do something that the specification is never going to allow. Take a look at the following fiddle for my solution:
.parent {
position: relative;
width: 200px;
height: 150px;
margin: 70px;
}
.child1 {
background-color: yellow;
width: 200px;
height: 150px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.child2 {
position: absolute;
top: 30px;
left: 50px;
background-color: green;
width: 70px;
height: 50px;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
If you want to apply transforming effects on a parent without affecting its children, you can simply animate a parent's pseudo-element like this:
.parent {
display: inline-block;
position: relative;
}
.parent::before {
content: "";
background: #fab;
/* positioning / sizing */
position: absolute;
left: 0;
top: 0;
/*
be aware that the parent class have to be "position: relative"
in order to get the width/height's 100% working for the parent's width/height.
*/
width: 100%;
height: 100%;
/* z-index is important to get the pseudo element to the background (behind the content of parent)! */
z-index: -1;
transition: 0.5s ease;
/* transform before hovering */
transform: rotate(30deg) scale(1.5);
}
.parent:hover::before {
/* transform after hovering */
transform: rotate(90deg) scale(1);
}
This actually worked for me. JSFiddle