How to create perspective text around a circular shape in HTML? - html

I have to do a web page with some perspective texts on it's menu and contents. Following is a link to an image of the effect I should achieve. Is it possible? Where to start? I'm clueless and don't even know what's the best to do. I appreciate any help.
http://goo.gl/Wlz5b

Rotating text
If you just need to rotate text elements, that can be done with CSS3, using a 2D-transform rotation.
Supporting IE8 and earlier would require using an IE matrix filter (and some extra work to position the text correctly).
JSFiddle Demo
HTML
<div class="content">
<p class="text text1">This is a short sentence.</p>
<p class="text text2">This is a second sentence.</p>
<p class="text text3">This is a third sentence.</p>
</div>
CSS
.text {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.text1 {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.text3 {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
3D rotation
If you need true 3D perspective (such that the text is larger on one end than the other), that will be tougher to manage cross-browser. The mock-up in the question doesn't appear to have 3D perspective.

Related

How to easily mirror my HTML vertically?

I'm working on the international website now, and one of its' languages is Arabic. Due to Arabic culture, whole interface must be mirrored vertically (obviously to flip sides, not only text direction).
I already tried to use the trick with transform: rotateY(180deg) on container and transform: rotateY(180deg) on each child node, but got an issue that my interface totally disppeared. Tried to transform: scale(-1, 1) with same result. backface-visibility: visible added to each node of document.
Do you have any idea how to mirror website interface without writing separate stylesheets and other painful things?
OK, I just recreated my problem here, maybe this can help: https://jsfiddle.net/z7ksof29/3/
For me this is working:
html {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

(CSS) skew img frame without distorting image

I'm making a website that contains many skewed elements, like this:
This isn't too bad, there are CSS transforms that could skew it. But how about this:
The image isn't distorted, just the frame is cropped in a skewed way. What's the easiest/best way to do this?
I think this should work for you. As a Mark commented on, clip-path is a nice way to go. There are tools for getting just the right path such as Clippy. Once you've got the path, you drop it right into your code. In my demo, I used it on the div wrapping the image, rather than on the image itself. I did it this way to keep border effects—added via pseudo-class—on top of the image.
Demo: http://codepen.io/antibland/pen/eZKxNa
I ended up using the following. It creates a skewed parent, then unskews the child, centering it and making it big enough to fill the skew's stick-out bits.
HTML
<div class="skewed">
<img src="images/sad-kid.jpg">
</div>
CSS
div.skewed {
position: relative;
height: 140px;
transform: skew(-2deg) rotate(2deg);
-webkit-transform: skew(-2deg) rotate(2deg);
-moz-transform: skew(-2deg) rotate(2deg);
overflow: hidden;
}
div.skewed > * {
width: 110%;
position: absolute;
top: 50%;
transform: skew(2deg) rotate(-2deg) translateY(-50%);
-webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
-moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}
OUTPUT
This is similar to Andy Hoffman's method, but supports a greater number of browsers.

Rotate html special character or text

I have this html character:
<div class="rotate">>></div>
I want this character facing down, for example.
I found this css, it seems not working.
.rotate{
webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
how to rotate?
jsfiddle
Replace webkit-transform: rotate(-90deg); by-webkit-transform: rotate(-90deg); there was typo you missed -.
Fiddle: https://jsfiddle.net/pzawLfgz/3/
If you're trying to rotate a span instead you need to change its display property.
.rotate-span {
display: inline-block;
transform: rotate(18deg);
}
.rotate-div {
transform: rotate(-18deg);
}
<div class="rotate-div">>></div>
<span class="rotate-span">>></span>
.rotate{
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
https://jsfiddle.net/pzawLfgz/2/
and notice this:
It is important that after the special imagined to for old browser
versions CSS commands generally comes last. This then the browser
always delivers the last recognized command and the broadly defined is
better than anything that can even slightly differ in their
implementation. Therefore, please always structured as follows: from
the particular to the general

Rotate IE7 90 degree

Is there a way to rotate IE7 90% (the whole page)? I tried to rotate body and HTML element 90 degree by using CSS, but scroll bars are displaying because the width and height are not fix the window. I just want to rotate whole html 90% and the width and height are fix the window. Please help me.
How can I do that? (Maybe using CSS or something else). Thank so much.
Sorry about my English.
I have found the following links which may help you:
https://code.google.com/p/jqueryrotate/wiki/Examples
or perhaps:
http://raphaeljs.com/
Raphael supports rotation for IE6 onwards, I hope this helps you in your research.
Use below code that will support in all browser,
/*rotate 60 degrees*/
#rotate60 {
/*General*/
transform: rotate(60deg);
/*Firefox*/
-moz-transform: rotate(60deg);
/*Microsoft Internet Explorer*/
-ms-transform: rotate(60deg);
/*Chrome, Safari*/
-webkit-transform: rotate(60deg);
/*Opera*/
-o-transform: rotate(60deg);
/*alter opacity*/
opacity:0.6;
filter:alpha(opacity=60);
}
/*rotate 90 degrees*/
#rotate90 {
/*General*/
transform: rotate(90deg);
/*Firefox*/
-moz-transform: rotate(90deg);
/*Microsoft Internet Explorer*/
-ms-transform: rotate(90deg);
/*Chrome, Safari*/
-webkit-transform: rotate(90deg);
/*Opera*/
-o-transform: rotate(90deg);
/*alter opacity*/
opacity:0.4;
filter:alpha(opacity=40);
}
and use overflow hidden for scrolling part.

Transform creating wavy text in Firefox

Folks, I have text on a div that has transform: rotate(3deg). In Firefox, the text is rendered wavy. Removing the transform to the div fixes the waviness. Is there a way for me to have my cake and eat it too?
HTML:
<div class="card turn-right">
<div class="card-text">
<p>Blah. Blah. Blah.</p>
</div>
</div>
CSS:
.card {
display: block;
width: 550px;
height: 375px;
}
.turn-right {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
Edit:
Additional information: I have to use a #font-face for this project.
Screenshot:
Try adding perspective
.turn-right {
-webkit-transform: perspective(9999px) rotate(3deg);
transform: perspective(9999px) rotate(3deg);
}
No need for -moz-transform in modern browsers
By the way, the same bug is present in webkit browsers.
Why does this work ?
I don't have a real answer, because I don't have the source for the browser. But my guess is the following. The browsers have a very good rendering engine, that can do lots of things, and does it pretty well. But doing all this is most of the time expensive (read: makes the browser slow). So, most of the time it is trying to guess: is this really necessary ? Do I really need to calculate the xxxx of the yyyy in the zzzz to display this ?
And some of the bugs come from that guess being incorrect, and omiting a necesary calculus.
The solution then, is to put there something that makes the browser rendering engine think "wait, I really need to calculate that, that is not the easy case".
Also in this line are fixes like translate3d(0,0,0) or translateZ(0) or backface-visibility hidden . What is the sense in translating something 0px ? They force the browser to do something the complicated way instead of the easy way, and solve - optimize the result.