Math, asked by jhaanamika1803, 11 months ago

See the attachment and answer each question with Explanation

Attachments:

Answers

Answered by priyakhushi529

Answer:

$<!DOCTYPE html><html lang="en"><head><title>CUBE</title></head><body><div class="container"><div id="cube"><div class="front">❣️</div><div class="back">❣️</div><div class="right">❣️</div><div class="left">❣️</div><div class="top">❣️</div><div class="bottom">❣️</div></div></div><style>body {padding-left: 30%;padding-top: 5%;}.container {width: 200px;height: 200px;position: relative;-webkit-perspective: 1000px;-moz-perspective: 1000px;}#cube {width: 100%;height: 100%;position: absolute;-webkit-transform-style: preserve-3d;-webkit-animation: rotatecube 10s infinite;-moz-transform-style: preserve-3d;-moz-animation: rotatecube 10s infinite;}#cube div {width: 200px;height: 200px;display: block;position: absolute;border: none;line-height: 200px;text-align: center;font-size: 50px;font-weight: bold;}@-webkit-keyframes rotatecube {0% { -webkit-transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg); }25% { -webkit-transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg); }50% { -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg); }75% { -webkit-transform: rotateX(270deg) rotateY(90deg) rotateZ(360deg); }100% { -webkit-transform: rotateX(360deg) rotateY(0deg) rotateZ(270deg); }}@-moz-keyframes rotatecube {0% { -moz-transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg); }25% { -moz-transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg); }50% { -moz-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg); }75% { -moz-transform: rotateX(270deg) rotateY(90deg) rotateZ(360deg); }100% { -moz-transform: rotateX(360deg) rotateY(0deg) rotateZ(270deg); }}.front {background: rgba(255,0,0,.5);}.back {background: rgba(0,255,0,.5);}.right {background: rgba(0,0,255,.5);}.left {background: rgba(0,255,255,.5);}.top {background: rgba(255,0,255,.5);}.bottom {background: rgba(255,255,0,.5);}#cube .front {-webkit-transform: rotateY(0deg ) translateZ( 100px );-moz-transform: rotateY( 0deg ) translateZ( 100px );}#cube .back {-webkit-transform: rotateX( 180deg ) translateZ( 100px );-moz-transform: rotateX( 180deg ) translateZ( 100px );}#cube .right {-webkit-transform: rotateY( 90deg ) translateZ( 100px );-moz-transform: rotateY( 90deg ) translateZ( 100px );}#cube .left {-webkit-transform: rotateY( -90deg ) translateZ( 100px );-moz-transform: rotateY( -90deg ) translateZ( 100px );}#cube .top {-webkit-transform: rotateX( 90deg ) translateZ( 100px );-moz-transform: rotateX( 90deg ) translateZ( 100px );}#cube .bottom {-webkit-transform: rotateX( -90deg ) translateZ( 100px );-moz-transform: rotateX( -90deg ) translateZ( 100px );}</style></body></html>$

Answered by vkpathak2671

Answer:

$<!DOCTYPE html><svg width="100%" height="300px">\ \textless \ br /\ \textgreater \ <g id="R1" transform="translate(250 250)"> \ \textless \ br /\ \textgreater \ <ellipse rx="100" ry="0" opacity=".3">\ \textless \ br /\ \textgreater \ <animateTransform attributeName="transform" type="rotate" dur="7s" from="0" to="360" repeatCount="indefinite" />\ \textless \ br /\ \textgreater \ <animate attributeName="cx" dur="8s" values="-20; 220; -20" repeatCount="indefinite" />\ \textless \ br /\ \textgreater \ <animate attributeName="ry" dur="3s" values="10; 60; 10" repeatCount="indefinite" />\ \textless \ br /\ \textgreater \ </ellipse>\ \textless \ br /\ \textgreater \ </g><use xlink:href="#R1" transform="rotate(72 390 150)" />\ \textless \ br /\ \textgreater \ <use xlink:href="#R1" transform="rotate(144 390 150)" />\ \textless \ br /\ \textgreater \ <use xlink:href="#R1" transform="rotate(216 390 150)" />\ \textless \ br /\ \textgreater \ <use xlink:href="#R1" transform="rotate(288 390 150)" />\ \textless \ br /\ \textgreater \ </svg></body></html>$

Previous Question

Next Question