Social Sciences, asked by kushalchhillar, 9 months ago

singhmohit explain how to use those codes to give animated answer show screenshot
explain step by step​

Answers

Answered by singhmohit097937
7

Answer:

&lt;!DOCTYPE html&gt;</h2><h2></h2><h2>&lt;html lang="en"&gt;</h2><h2></h2><h2>&lt;head&gt;</h2><h2></h2><h2>&lt;title&gt;CUBE&lt;/title&gt;</h2><h2></h2><h2>&lt;/head&gt;</h2><h2></h2><h2>&lt;body&gt;</h2><h2></h2><h2>&lt;div class="container"&gt;</h2><h2></h2><h2>&lt;div id="cube"&gt;</h2><h2></h2><h2>&lt;div class="front"&gt;15&lt;/div&gt;</h2><h2></h2><h2>&lt;div class="back"&gt;Thanks&lt;/div&gt;</h2><h2></h2><h2>&lt;div class="right"&gt;+&lt;/div&gt;</h2><h2></h2><h2>&lt;div class="left"&gt;Follow &lt;/div&gt;</h2><h2></h2><h2>&lt;div class="top"&gt;=&lt;/div&gt;</h2><h2></h2><h2>&lt;div class="bottom"&gt;Inbox&lt;/div&gt;</h2><h2></h2><h2>&lt;/div&gt;</h2><h2></h2><h2>&lt;/div&gt;</h2><h2></h2><h2>&lt;style&gt;</h2><h2></h2><h2>body {</h2><h2></h2><h2>padding-left: 30%;</h2><h2></h2><h2>padding-top: 5%;</h2><h2></h2><h2>}</h2><h2></h2><h2>.container {</h2><h2></h2><h2>width: 200px;</h2><h2></h2><h2>height: 200px;</h2><h2></h2><h2>position: relative;</h2><h2></h2><h2>-webkit-perspective: 1000px;</h2><h2></h2><h2>-moz-perspective: 1000px;</h2><h2></h2><h2>}</h2><h2></h2><h2>#cube {</h2><h2></h2><h2>width: 100%;</h2><h2></h2><h2>height: 100%;</h2><h2></h2><h2>position: absolute;</h2><h2></h2><h2>-webkit-transform-style: preserve-3d;</h2><h2></h2><h2>-webkit-animation: rotatecube 10s infinite;</h2><h2></h2><h2>-moz-transform-style: preserve-3d;</h2><h2></h2><h2>-moz-animation: rotatecube 10s infinite;</h2><h2></h2><h2>}</h2><h2></h2><h2>#cube div {</h2><h2></h2><h2>width: 200px;</h2><h2></h2><h2>height: 200px;</h2><h2></h2><h2>display: block;</h2><h2></h2><h2>position: absolute;</h2><h2></h2><h2>border: none;</h2><h2></h2><h2>line-height: 200px;</h2><h2></h2><h2>text-align: center;</h2><h2></h2><h2>font-size: 50px;</h2><h2></h2><h2>font-weight: bold;</h2><h2></h2><h2>}</h2><h2></h2><h2>@-webkit-keyframes rotatecube {</h2><h2></h2><h2>0% { -webkit-transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg); }</h2><h2></h2><h2>25% { -webkit-transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg); }</h2><h2></h2><h2>50% { -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg); }</h2><h2></h2><h2>75% { -webkit-transform: rotateX(270deg) rotateY(90deg) rotateZ(360deg); }</h2><h2></h2><h2>100% { -webkit-transform: rotateX(360deg) rotateY(0deg) rotateZ(270deg); }</h2><h2></h2><h2>}</h2><h2></h2><h2>@-moz-keyframes rotatecube {</h2><h2></h2><h2>0% { -moz-transform: rotateX(0deg) rotateY(360deg) rotateZ(90deg); }</h2><h2></h2><h2>25% { -moz-transform: rotateX(90deg) rotateY(270deg) rotateZ(180deg); }</h2><h2></h2><h2>50% { -moz-transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg); }</h2><h2></h2><h2>75% { -moz-transform: rotateX(270deg) rotateY(90deg) rotateZ(360deg); }</h2><h2></h2><h2>100% { -moz-transform: rotateX(360deg) rotateY(0deg) rotateZ(270deg); }</h2><h2></h2><h2>}</h2><h2></h2><h2>.front {</h2><h2></h2><h2>background: rgba(255,0,0,.5);</h2><h2></h2><h2>}</h2><h2></h2><h2>.back {</h2><h2></h2><h2>background: rgba(0,255,0,.5);</h2><h2></h2><h2>}</h2><h2></h2><h2>.right {</h2><h2></h2><h2>background: rgba(0,0,255,.5);</h2><h2></h2><h2>}</h2><h2></h2><h2>.left {</h2><h2></h2><h2>background: rgba(0,255,255,.5);</h2><h2></h2><h2>}</h2><h2></h2><h2>.top {</h2><h2></h2><h2>background: rgba(255,0,255,.5);</h2><h2></h2><h2>}</h2><h2></h2><h2>.bottom {</h2><h2></h2><h2>background: rgba(255,255,0,.5);</h2><h2></h2><h2>}</h2><h2></h2><h2>#cube .front {</h2><h2></h2><h2>-webkit-transform: rotateY(0deg ) translateZ( 100px );</h2><h2></h2><h2>-moz-transform: rotateY( 0deg ) translateZ( 100px );</h2><h2></h2><h2>}</h2><h2></h2><h2>#cube .back {</h2><h2></h2><h2>-webkit-transform: rotateX( 180deg ) translateZ( 100px );</h2><h2></h2><h2>-moz-transform: rotateX( 180deg ) translateZ( 100px );</h2><h2></h2><h2>}</h2><h2></h2><h2>#cube .right {</h2><h2></h2><h2>-webkit-transform: rotateY( 90deg ) translateZ( 100px );</h2><h2></h2><h2>-moz-transform: rotateY( 90deg ) translateZ( 100px );</h2><h2></h2><h2>}</h2><h2></h2><h2>#cube .left {</h2><h2></h2><h2>-webkit-transform: rotateY( -90deg ) translateZ( 100px );</h2><h2></h2><h2>-moz-transform: rotateY( -90deg ) translateZ( 100px );</h2><h2></h2><h2>}</h2><h2></h2><h2>#cube .top {</h2><h2></h2><h2>-webkit-transform: rotateX( 90deg ) translateZ( 100px );</h2><h2></h2><h2>-moz-transform: rotateX( 90deg ) translateZ( 100px );</h2><h2></h2><h2>}</h2><h2></h2><h2>#cube .bottom {</h2><h2></h2><h2>-webkit-transform: rotateX( -90deg ) translateZ( 100px );</h2><h2></h2><h2>-moz-transform: rotateX( -90deg ) translateZ( 100px );</h2><h2></h2><h2>}</h2><h2></h2><h2>&lt;/style&gt;</h2><h2></h2><h2>&lt;/body&gt;</h2><h2></h2><h2>&lt;/html&gt;firstly copy that code and paste it in clipboard and at last paste that code in the answer

Answered by hellythakor8
0

Answer: Here is your answer

Explanation:

CUBE15Thanks+Follow =Inboxbody {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 );}firstly copy that code and paste it in clipboard and at last paste that code in the answer

PLZ MARK ME AS BRAINLIEST if possible ❣️ ❣️ ❣️ ❣️ ❣️ ❣️ ❣️ ❣️ ❣️

Previous Question
Next Question
Similar questions
English, 4 months ago
please anyone say this answer please​...
History, 4 months ago
Who wrote Rajtarangini?
Math, 4 months ago
In the given figure allm, find the value of x y z and t​...
Math, 9 months ago
the product of non zero number and irrational no. is.a.always rational b.always irrational c. rational or irrational But keep in consecration that it is non zero number.​
Math, 9 months ago
a chair costs $120 .peter bought 30 chairs .by mistake the shopkeeper charged $10 less per chair .tto be fair to all ,find whether peter had to pay or receive the money .what is the extra amount ?what will you do if by mistake ,shopkeeper returns you extra money ?​
English, 1 year ago
Counter view on atomic energy as only negative effect...
Chemistry, 1 year ago
define the term concentration??​
Biology, 1 year ago
Define irrigation describe most suitable system in present condition.