Are there any ways to rotate CSS 3 shapes at a certain angle?
Dabblet code here.
.shape
{
transform:rotate(150deg);
-ms-transform:rotate(150deg); /* IE 9 */
-webkit-transform:rotate(150deg); /* Opera, Chrome, and Safari */
}
Add transform:rotate to your id octagon.
Refer this link: http://davidwalsh.name/css-transform-rotate
.object {
transform: rotate(45deg);
}
You can also set the transform-origin:
object {
transform: rotate(45deg);
transform-origin: left;
}
You can change the position to left, right, top or bottom depending on how you want the object to rotate.
Hope this helps!
Related
I am having trouble understanding css rotate3d method. Could someone please explain how the axis of rotation is obtained from the x, y, and z values since they are not given in degrees?
3D rotate mean in 3 direction.
First, you must be understand Rotate.
#myDiv {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
rotateY()
#myDiv {
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
rotateZ()
#myDiv {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
It is just an example, you use these three properties to make 3D rotate.
I have a problem with a webpage I'm working on. On Firefox it doesn't seem to have any problems.
I have 2 elements, horizontal scrolling, with background images and the transition between those 2 is made using CSS3, transformX(). At first these 2 elements overlay (so that you can see the background image of the 2nd element), when you click the right arrow the second element slides from right to left in front. When you click right the first element slides from left to right
When I go back to the first element, the second element flickers, like rearranging its position.
.first-container.first-container1 {
background: transparent url('../img/backgrounds/first1-background.jpg') no-repeat center center;
background-size: cover;
left: 0;
}
.first-container.first-container2 {
background: transparent url('../img/backgrounds/first2-background.jpg') no-repeat center center;
background-size: cover;
left: 100%;
}
.bs-first .first1 .first-container.first-container2 {
-webkit-transform: translateX(-8.5%);
-moz-transform: translateX(-8.5%);
-o-transform: translateX(-8.5%);
-ms-transform: translateX(-8.5%);
transform: translateX(-8.5%);
}
.first2 .first-container.first-container1 {
-webkit-transform: translateX(8.5%);
-moz-transform: translateX(8.5%);
-o-transform: translateX(8.5%);
-ms-transform: translateX(8.5%);
transform: translateX(8.5%);
z-index: 9;
}
I could really use a few hints on how i could solve this. Thank you!
You can try -webkit-backface-visibility: hidden; applied to the element that has applied the css transform.
In your case if you are using background images that it won't work so just create a class and apply it like:
.stop-flickering {-webkit-transform:translate3d(0,0,0);}
Also you can try:
-webkit-transform-style: preserve-3d;
In my case none of these methods worked :
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
I had an animation on an empty div to create bouncing circle and the solution was to use pseudo element :before and the flicker disappeared
I'm trying to skew some text that sits within a div, which is all nice a straight forward, but I am trying to find a way to keep each line completely left justified to one side of the div, as currently the first few lines sit in so many pixels and the last few lines overflow out. The font we're using is already italic but we want to push it a little more with the skew, I know it's not going to look perfect but it works for what we want.
Is there a way to do this? I've tried searching one out already but I'm not sure if I'm looking for the right thing or it's something that's nobody bothers doing.
Heres a basic JSfiddle
and an awful mock up... bad mockup
and the basic code to test it out...
Here is the CSS:
.box {
width:600px;
height:300px;
background:#f1f1f1;
}
.box p {
transform: skew(-20deg);
-ms-transform: skew(-20deg); /* IE 9 */
-moz-transform: skew(-20deg); /* Firefox */
-webkit-transform: skew(-20deg); /* Safari and Chrome */
-o-transform: skew(-20deg); /* Opera */
}
And the HTML:
<div class="box">
<p>Text here - more in the fiddle</p>
</div>
Thanks guys!
This may be a silly question, but are you simply wanting italic text? If that's the case, and your font is italic by default as you say, simply remove the skew completely and give your .box p selector font-style: italic:
.box p {
font-style: italic;
}
JSFiddle demo.
If you are wanting the text's container to be skewed, however, what you can do is introduce a container element and apply the skew on that:
<article>
<p>...</p>
</article>
.box article {
transform: skew(-20deg);
-ms-transform: skew(-20deg); /* IE 9 */
-moz-transform: skew(-20deg); /* Firefox */
-webkit-transform: skew(-20deg); /* Safari and Chrome */
-o-transform: skew(-20deg); /* Opera */
}
Now simply counter that skew on your p element by skewing the same amount in the opposite direction:
.box article p {
font-style: italic;
transform: skew(20deg);
-ms-transform: skew(20deg); /* IE 9 */
-moz-transform: skew(20deg); /* Firefox */
-webkit-transform: skew(20deg); /* Safari and Chrome */
-o-transform: skew(20deg); /* Opera */
}
Here I've again added font-style: italic to make the text render italic.
JSFiddle demo.
here is my Work http://jsfiddle.net/2h8tv/
Here i am using css transform: rotate(90.0deg) . You can see the text coming out of the container. How can solve this without using padding or margin
I think that using transform-origin should be the most proper thing in this case. When you rotate an element with transform: rotate(x), the rotation is done by a specific origin. By default, this origin is set to 50% 50% which is the exact center of the element.
Add the following style to .rotate class
-webkit-transform-origin: 8px 12px;
However, you can make this rule more general:
-webkit-transform-origin: 50% 12px;
First part of the property is vertical position of the origin point. So in this case we set it to middle (50%). The second one defines horizontal position of the origin, so depending on parent div's width we should set it in px.
You have a few options here, obviously just adding padding would be the easiest.
But you can also mess with the transform-origin policy.
transform: rotate(90deg); transform-origin:8px 12px;
-ms-transform: rotate(90deg); /* IE 9 */
-ms-transform-origin:8px 12px /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-webkit-transform-origin:8px 12px /* Safari and Chrome */
-moz-transform: rotate(90deg); /* Firefox */
-moz-transform-origin:8px 12px /* Firefox */
-o-transform: rotate(90deg); /* Opera */
-o-transform-origin:8px 12px /* Opera */
See and example here http://jsfiddle.net/2h8tv/2/
You could use a non-breaking Space
<div class="orangeblock "><div class="rotate"> Free</div></div>
<div class="yelloblock"><div class="rotate"> $1999</div></div>
Check -> http://jsfiddle.net/2h8tv/1/
If you increase the font-size of .rotate. it will get aligned.
well, I normally find the answer to my questions here but this time I didn't so I will now ask my first one here! :)
I have some rotated text on my page and it is positioned using position:absolute, like below:
.rotate-box .rotate-text{
display: block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;
left: -45px;
top: 170px;
}
<div class="rotate-box">
<span class="rotate-text">Rotated text</span>
</div>
This works fine on all browsers (with webkit) except for Safari and Chrome where the text is displayed about 90px lower than in the other browsers.
To prevent this I have added:
#media screen and (-webkit-min-device-pixel-ratio:0){
.rotate-text {top: 80px !important;}
}
Now the text is in the correct place in all browsers but this doesn't feel right to me... Am I missing something here?
I hate adding browser exception code, it tends to come back and bite you in the long run... :o
Regards,
Anders
Change this line:
-webkit-transform: rotate(90deg);
to
-webkit-transform: rotate(90deg) translate(-100px, 16px);
As you know, this line is only used by the webkit browsers (Safari, Chrome)
You'll probably have to play around with the exact px figures, but then you can get rid of the extra #media screen tag.
Look into transform-origin. Basically, you should be able to do transform-origin: 0 0; (with all the prefixes, of course), and it'll hook the rotate to the top left, which sounds like what you want.