Tuesday, March 22, 2022

The Matrix()Method

 The Matrix()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 Matrix()Method</h1>

<p>The Matrix()Method Matrix combines all the 2d transforms into one</p>

<div> The  a normal div element</div>

<div class="mydiv1">Use the Matrix()Method</div>

<div class="mydiv2">Another we use of the Matix()Method</div>

</body>


</html>


CSS Matrix Method Style

 div{

    width: 300px;

    height:100px;

    background-color: yellow;

    border: 1px solid black;

}

.mydiv1{

    transform: matrix(1,-0.3,0,1,0,0);

}

.mydiv2{

    transform: matrix(1,0,0.5,1,150,0);

}

No comments:

Post a Comment

JavaScript Animated

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