It's not the IE6 bug of position: relative mentioned here, and I couldn't figure out why. When the child div animates beyond its parent's border some part of it still flickers for a split second before disappearing properly.
The cause was the attribute transform: translate3d(0px, 0px, 0px) series added to force render the div. I added all four of them using LESS's method, but only the first one is really in use.
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
Remove the last one and it's fixed.
Related
https://jsfiddle.net/uoz5rac7/2/
I have a parallax effect here in the first section, but I would like to have it on all sections. If I use transform: translateZ(-1px) scale(2);
-webkit-transform: translateZ(-1px) scale(2); on the other sections my first sections breaks.
Is there any way to achieve the same effect like in the first section for others?
I'm unsure if there is a property that does this. But I'm looking to add text vertically in a div on this website- http://chazsouthard.org/. However I want the text to appear to be rotated 90° clockwise.
I attached a screenshot from Photoshop as a example for what I'm trying to accomplish.
If you are using CSS3 I believe you are looking for transform: rotate(90deg);
http://www.w3schools.com/cssref/css3_pr_transform.asp
You will need to use a negative number here to achieve the orientation you desire. Adding the prefixed versions as well for cross-browser compatibility. simple codepen: http://codepen.io/BuoyantMedia/pen/Asdmr
transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
I have a practical use for the CSS3 skewX property. I have written a simple image accordian-like script with jQuery. Images are skewed (already, not in CSS) as part of the design and in order to make the correct areas clickable, the containing divs need to be skewed.
The problem is that in skewing the div, the image is skewed aswell. Skewing a skewed image does not look good.
One solution I've tried is resetting the skewX value to 0deg on the image, but to no avail. In the fiddle, I haven't included the accordian as this isn't necessary to the solution.
http://jsfiddle.net/yM49N/2/
<div><img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"></div>
div {
-webkit-transform:skewX(200deg);
-moz-transform:skewX(200deg);
-o-transform:skewX(200deg);
-ms-transform:skewX(200deg);
transform:skewX(200deg);
border:1px solid red;
}
You can apply an inverted skewX on img:
img {
-webkit-transform: skewX(-200deg);
-moz-transform: skewX(-200deg);
-o-transform: skewX(-200deg);
-ms-transform: skewX(-200deg);
transform: skewX(-200deg);
}
To make the div contain the image properly, you also need to add overflow: hidden.
http://jsfiddle.net/thirtydot/yM49N/3/
Is it possible to specify an origin at the top left (0%, 0%) for scaling, and a different origin (center) for rotation in CSS3? I am only working with webkit, if that helps.
I am currently using a transform list (i.e. -webkit-transform: scale(newScale) rotate(newRotate)
but it seems like it isn't possible to change the origin in-between passes. Is there a better way to look at this? Presently, if I scale an object and rotate it with an origin at the default center, the position of the element is now off and so when you drag the element, the cursor is still at the top left of the element, whereas it should be at the center. Changing the origin to the center to scale it fixes this, but presents new problems with rotation and flipping.
Found a good solution to the problem... by creating a parent/child relationship as follows:
<div class="container">
<img src="" />
</div>
I can now setup two classes as follows:
.container {
-webkit-transform-origin: 0% 0%;
-webkit-transform: scale(0.5);
}
.container img {
-webkit-transform-origin: 50% 50%;
-webkit-transform: rotate(45deg);
}
This will do exactly what I want: scale with an origin at the top left, then rotate with the origin at the center. Voila!
Instead think of the scaling with origin (0,0) as a scaling+translation with origin center. In isolation the following:
-webkit-transform-origin: top left;
-webkit-transform: scale(1.5);
is the same as:
-webkit-transform-origin: center;
-webkit-transform: scale(1.5) translate3d(16.66%, 16.66%, 0);
In theory the rotation origin center should leave the corners sticking out by sqrt(1/2)-0.5 requiring us to move the origin down and right by 20.71%, but for some reason the webkit transform algorithm moves things down for us (but not quite enough) and scales the origin for us (again not quite). Thus we need to move right by 50% and make some adjustments for this odd behavior:
-webkit-transform-origin: center;
-webkit-transform: scale(1.5) rotate(45deg) translate3d(52.5%, 0.5%, 0);
-webkit-transition: all 2s ease-in;
Note: my original answer was using a div with width:100px; and height100px; which requires a translate3d(54px, 0, 0).
What about that: http://jsfiddle.net/22Byh/1/
First of all,I am doing a html5 webapp on iOS, especially iPad.when touchmove,the div should move with my finger together,I used to change the left value to make this effect,but it seems not smooth enough ,so I used translate3d to do it,it seems great!
And then,I just found the strange flicker happend,there are white flicker or flash in there several time when finger move the div.by the way,after moved once,the flicker is dispear.
So,I check a lots of functions which include:
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
But no one works except change the flicker color to grey=.=
So,this is my question.(iOS 5.01)
you should check the children, try giving them
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
I had more strange issue when copies of input elements were displayed as artifacts all over the next content after scrolling down and up.
And couple lines of CSS saved the day (actually days of struggling :)
Make sure you use such CSS for your scrolling container and all children inside of it
.scrolling-container {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scrolling-container .child-element {
position: relative;
-webkit-transform: translate3d(0,0,0);
}