22 Mar 2018
CSS transform Property
In this blog, I am going to show how we can display a text in the vertical orientation. We can use “transform” property of CSS for this. Let’s see the code in detail:
<html>
<style>
body{width:810px;}
.v_rotate {
float: left;
transform: rotate(90deg);
margin-left: 50px;
transform-origin: left top 0;
padding: 10px;
background-color: rgba(37, 34, 34, 0.3);
opacity: 0.9;
font-size: 1.6em;
color: #FFF;
text-transform: uppercase;
width: 360px;
}
#v_text_demo {
background:url(‘bg.jpg’);
width: 800px;
height: 380px;
}
</style>
<body>
<div id=”v_text_demo”>
<div class=”v_rotate”>Vertical Text In Html.</div>
</div>
</body>
</html>
<style>
body{width:810px;}
.v_rotate {
float: left;
transform: rotate(90deg);
margin-left: 50px;
transform-origin: left top 0;
padding: 10px;
background-color: rgba(37, 34, 34, 0.3);
opacity: 0.9;
font-size: 1.6em;
color: #FFF;
text-transform: uppercase;
width: 360px;
}
#v_text_demo {
background:url(‘bg.jpg’);
width: 800px;
height: 380px;
}
</style>
<body>
<div id=”v_text_demo”>
<div class=”v_rotate”>Vertical Text In Html.</div>
</div>
</body>
</html>
Output:
In the above example I have taken background image with a vertical tagline to show a text. Using CSS, I rotate the text with 90-degree angle left to display it in the vertical orientation.
We can also assign skewY and scaleY to the “transform” property of CSS, let’s take an example:
<html>
<head>
<style>
.divEx1{
width: 150px;
height: 80px;
background-color: cyan;
transform: rotate(30deg);
margin:10px;
}
.divEx2{
width: 150px;
height: 80px;
background-color: cyan;
transform: skewY(30deg);
margin:10px;
}
.divEx3{
width: 150px;
height: 80px;
background-color: yellow;
transform: scaleY(1.6);
}
</style>
</head>
<body>
<h1>HTML transform Property</h1>
<h2>transform: rotate(30deg):</h2><br/>
<div class=”divEx1″>Rotate to 30deg.</div>
<br>
<h2>transform: scewY(30deg):</h2><br/>
<div class=”divEx2″>scewY to 30deg.</div>
<br>
<h2>transform: scaleY(1.6):</h2><br/>
<div class=”divEx3″>scaleY to 1.6</div>
</body>
</html>
<head>
<style>
.divEx1{
width: 150px;
height: 80px;
background-color: cyan;
transform: rotate(30deg);
margin:10px;
}
.divEx2{
width: 150px;
height: 80px;
background-color: cyan;
transform: skewY(30deg);
margin:10px;
}
.divEx3{
width: 150px;
height: 80px;
background-color: yellow;
transform: scaleY(1.6);
}
</style>
</head>
<body>
<h1>HTML transform Property</h1>
<h2>transform: rotate(30deg):</h2><br/>
<div class=”divEx1″>Rotate to 30deg.</div>
<br>
<h2>transform: scewY(30deg):</h2><br/>
<div class=”divEx2″>scewY to 30deg.</div>
<br>
<h2>transform: scaleY(1.6):</h2><br/>
<div class=”divEx3″>scaleY to 1.6</div>
</body>
</html>
Output:
About Author
bestonetechnologies
I am a software developer.
