Implement 2D transformation on Web page.

 


Code


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Implement 2D transformation on web page.</title>
<style>
div{
width: 200px;
height: 200px;
border-radius: 10px;
text-align: center;
font-size: 30px;
font-weight: bold;
margin-left: 200px;
/* background-color: lightgreen; */
border: 2px solid red;
/* border-style: dotted; */
}
.a{
background-color: lightblue;
/* position: relative;
top: 50px;
left: 50px; */
transform: translate(50px,50px);
/* transform: translateX(50px); */
/* transform: translateY(50px); */
}
.b{
background-color: antiquewhite;
/* transform: scale(0.8); */
transform: scaleX(0.4);
/* transform: scaleY(0.4); */
}
.c{
background-color: aquamarine;
/* transform: rotateX(60deg); */
/* transform: rotateY(60deg); */
/* transform: rotate(45deg); */

/* negative deg is rotate anti clock wise */
transform: rotate(-45deg);
}
.d{
background-color: aliceblue;
transform: skew(20deg,20deg);
/* transform: skewX(20deg); */
/* transform: skewY(30deg); */
}
.e{
background-color: tomato;
transform: matrix(1,-0.8,0.5,1,50,50);
}
.f{
width: 300px;
height: 100px;
margin-top: 200px;
background-color: blueviolet;
border: 2px solid black;
}
div#mydiv{
transform: translate(50px,100px);

}
</style>
</head>
<body>
<h1>Transform Property</h1>

<h2>Transform: rotate</h2>
<div class="a">Hello World</div>
<h2>Transform: </h2>
<div class="b">Hello World</div>
<h2>Transform: </h2>
<div class="c">Hello World</div>
<h2>Transform: </h2>
<div class="d">Hello World</div>
<h2>Transform: </h2>
<div class="e">Hello World</div>
<div class="f">The original div tag</div>
<div id="mydiv">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus, saepe.
</div>
</body>
</html>

Output






Comments

Post a Comment

Popular posts from this blog

Write A Program To Print Hello World Using Lex

Image
  How to write lex program ? first write a lex program in notepad then save with .l extension. next step is open cmd(Command prompt) then open directory in which your program is saved. then 3 step to run lex program let's see flex filename.l gcc lex.yy.c a.exe Code %{ #include<stdlib.h> %} %% ("hi"|"HI")"\n" {printf("\nHello Sir,Good Morning\n");} ("bye"|"BYE")"\n" {printf("\nBye, Take Care\n");} . {yyerror();} %% int main() { yylex(); return 0; } int yywrap(void) { return 0; } int yyerror(){ printf("Enter hi,HI,bye or BYE"); }
Read more

Create a Student registration form using following tags form,input,textarea,button,select,optio. The registration form must consist of following information: first name,Middle name,last name, gender(use radio button),address,phone no,email id,hobbies(use checkbox),city,state,country,collage name (use dropdown menu).

Image
  Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Student Registration Form</title> </head> <body> <h1>Parul Registration Form</h1> <form action="home.html"> <label>First Name:</label><br> <input type="text" name="name"><br><br> <label>Middle Name:</label><br> <input type="text" name="name"><br><br> <label>Last Name:</label><br> <input type="text" name="name"><br><br> <label>Gender</label><br> <input type="radio" name="Gender" value="male">Male <br> <in...
Read more