Saturday, April 9, 2022

Animation of transform

 Animation of transform


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>Animation of transform</h1>

<p>Gradually rotete the DIV element 180 degrees and back</p>

<div id="mydiv">

    <h1>MY DIV</h1>

</div>

</body>


</html>


CSS Animation of transform Style

 #mydiv{

    margin: auto;

    border: 1px solid  black;

    width:200px;

    height:100px;

    background-color: coral;

    color: #fff;

    animation: mymove 5s infinite;

}

@keyframes mymove{

    50%{

        transform: rotate(180deg);

    }

}

at No comments:

Wednesday, April 6, 2022

The Transform Porperty

 The Transform Porperty


 <!DOCTYPE html>

<html>


<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="STYLESHEET" type="text/css" href="web.css">

    <title>web design</title>

</head>


<body>

<h1>The transform Porperty </h1>

<h2>transform rotete(20deg)</h2>

<div class="a">Hello World</div>

<h2>transform skewY(20deg)</h2>

<div class="b">Hello World</div>

<h2>transform Scale(1.5)</h2>

<div class="c">Hello World</div>

</body>


</html>


CSS Transform Porperty Style

 div.a{

    width:150px;

    height:80px;

    background-color: yellow;

    -ms-transform: rotate(20deg);

    transform: rotate(20deg);

}

div.b{

    width:150px;

    height:80px;

    background-color: yellow;

    -ms-transform: skewY(20deg);

    transform: skewY(20deg);

}

div.c{

    width:150px;

    height:80px;

    background-color: yellow;

    -ms-transform:scaleY(1.5);

    transform: scaleY(1.5);

}

at No comments:

Saturday, April 2, 2022

The 3DRotete()Method

 The 3DRotete()Method

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="STYLESHEET" type="text/css" href="web.css">
    <title>web design</title>
</head>

<body>
<h1>The roteteZ()Method</h1>
<p>The roteteZ()Method rotete an element around its Z-axis at is given degree</p>
<div>This a normal div element</div>
<div class="mydiv">This div element is rotete 90 degree</div>
</body>

</html>

 

CSS Rotete()Method Style

 div{

    width: 300px;

    height:100px;

    background-color: yellow;

    border: 1px solid black;

}

.mydiv{

    transform: rotateZ(90deg);

}

at No comments:

Friday, April 1, 2022

The 3DRotete()Method

 The 3DRotete()Method

 

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="STYLESHEET" type="text/css" href="web.css">
    <title>web design</title>
</head>

<body>
<h1>The RotateY()Method</h1>
<p>The roteteY()Method rotete an element around its Yaxis at a given degree</p>
<div>This a normal div element </div>
<div class="mydiv">The div element is rotete Yaxis degree</div>
</body>

</html>

CSS Rotete()Method Style

 div{

    width: 300px;

    height:100px;

    background-color: yellow;

    border:1px solid black;

}

.mydiv{

    transform: rotateY(150deg);

}

at No comments:
Subscribe to: Posts (Atom)

JavaScript Animated

  JavaScript Animated <!DOCTYPE html> <html> <style> #myContainer {   width: 400px;   height: 400px;   position: relative;...

  • Button on Image
     Button on Image Code   <!DOCTYPE html> <html>     <head>         <link rel="stylesheet" href="https://c...
  • JavaScript Variables
      JavaScript  Variables 4 Ways to Declare a JavaScript Variable: Using  var Using  let Using  const Using nothing   What are Variables? Vari...
  • The Scale()Method
     The Scale()Method   <!DOCTYPE html> <html> <head>     <link rel="stylesheet" href="https://cdnjs.cloudf...