I need help putting together a page, program, or application that does the following math basics topics and shows the calculations that the program did.
- Object Transposition
- Object rotation
- Object Increase (independent width and height)
- Object Mirroring (from different angles)
- Object Shear (from different points)
I made a simple screen that does some of the movements, but does not show the calculations and does not do the etching or the mirroring of different angles.
I've put the codes I've made into one to make visualization simpler
$("#top").click(function() {
$("#content").animate( {"top": "-=25px"}, "fast");
});
$("#bottom").click(function() {
$("#content").animate( {"top": "+=20px"}, "fast");
});
$("#right").click(function() {
$("#content").animate(
{
"left": "+=15px"
}, "fast");
});
$("#left").click(function() {
$("#content").animate( {"left": "-=50px"}, "fast");
});
$("#aumentar").click(function() {
$("#content").animate(
{
"height": "+=10px",
"width": "+=10px"
}, "fast");
});
$("#diminuir").click(function() {
$("#content").animate(
{
"height": "-=10px",
"width": "-=10px"
}, "fast");
});
var rotation = 0;
jQuery.fn.movimento = function(degrees) {
$(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
'-moz-transform' : 'rotate('+ degrees +'deg)',
'-ms-transform' : 'rotate('+ degrees +'deg)',
'transform' : 'rotate('+ degrees +'deg)'});
};
$('#girar').click(function() {
rotation += 5;
$(content).movimento(rotation);
});
jQuery.fn.movimento2 = function(degrees) {
$(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
'-moz-transform' : 'rotate('+ degrees +'deg)',
'-ms-transform' : 'rotate('+ degrees +'deg)',
'transform' : 'rotate('+ degrees +'deg)'});
};
$('#regirar').click(function() {
rotation -= 5;
$(content).movimento2(rotation);
});
$("#top2").click(function() {
$("#content2").animate( {"top": "-=25px"}, "fast");
});
$("#bottom2").click(function() {
$("#content2").animate( {"top": "+=20px"}, "fast");
});
$("#right2").click(function() {
$("#content2").animate(
{
"left": "+=15px"
}, "fast");
});
$("#left2").click(function() {
$("#content2").animate( {"left": "-=50px"}, "fast");
});
$("#aumentar2").click(function() {
$("#content2").animate(
{
"height": "+=10px",
"width": "+=10px"
}, "fast");
});
$("#diminuir2").click(function() {
$("#content2").animate(
{
"height": "-=10px",
"width": "-=10px"
}, "fast");
});
var rotation = 0;
jQuery.fn.movimento = function(degrees) {
$(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
'-moz-transform' : 'rotate('+ degrees +'deg)',
'-ms-transform' : 'rotate('+ degrees +'deg)',
'transform' : 'rotate('+ degrees +'deg)'});
};
$('#girar2').click(function() {
rotation += 5;
$(content2).movimento(rotation);
});
jQuery.fn.movimento2 = function(degrees) {
$(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
'-moz-transform' : 'rotate('+ degrees +'deg)',
'-ms-transform' : 'rotate('+ degrees +'deg)',
'transform' : 'rotate('+ degrees +'deg)'});
};
$('#regirar2').click(function() {
rotation -= 5;
$(content2).movimento2(rotation);
});html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background-color: #ededed
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
#content {
background-color: #6688ff;
position: relative;
width: 50px;
height: 50px;
border-radius: 20px;
padding: 3px;
text-indent: -99999;
left: 100;
float:left;
top: 20px;
}
#content2 {
background-color: #bd0000;
position: relative;
width: 40px;
height: 40px;
padding: 3px;
left: 300px;
z-index: -9;
border-radius: 5px;
text-indent: -99999;
float:left;
top: 60px;
}
.controles{
border: 0px solid #333;
float: left;
padding: 10px 0px;
width: 100%;
text-align: center;
}
.btn{
border: 1px solid #6688ff;
background-color: #6688ff;
color: #ffffff;
padding: 5px 10px;
border-radius: 5px;
font-weight: bold;
text-transform: capitalize;
font-size: 12px;
}
.btn2{
border: 1px solid #bd0000;
background-color: #bd0000;
color: #ffffff;
padding: 5px 10px;
border-radius: 5px;
font-weight: bold;
text-transform: capitalize;
font-size: 12px;
}
.terreno{
border: 1px solid #ccc;
width: 95%;
height: auto;
background-color: #ffffff;
min-height: 75%;
position: relative;
z-index: -99999;
overflow: hidden;
margin: 0px auto;
}
.rotate {
background: #F02311;
color: #FFF;
width: 200px;
height: 200px;
text-align: center;
font: normal 1em Arial;
position: relative;
top: 50px;
left: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="controles">
<input type="button" id="left" value="Esquerda" class="btn">
<input type="button" id="right" value="Direita" class="btn">
<input type="button" id="bottom" value="Baixo" class="btn">
<input type="button" id="top" value="Topo" class="btn">
</div>
<div class="controles">
<input type="button" id="aumentar" value="Aumentar" class="btn">
<input type="button" id="diminuir" value="Diminuir" class="btn">
<input type="button" id="girar" value="Girar Esquerda" class="btn">
<input type="button" id="regirar" value="Girar Direita" class="btn">
</div>
<div class="controles">
<input type="button" id="left2" value="Esquerda" class="btn2">
<input type="button" id="bottom2" value="Baixo" class="btn2">
<input type="button" id="top2" value="Topo" class="btn2">
<input type="button" id="right2" value="Direita" class="btn2">
<div>
<div class="controles">
<input type="button" id="aumentar2" value="Aumentar" class="btn2">
<input type="button" id="diminuir2" value="Diminuir" class="btn2">
<input type="button" id="girar2" value="Girar Esquerda" class="btn2">
<input type="button" id="regirar2" value="Girar Direita" class="btn2">
</div>
<div class="terreno">
<div id="content">Objeto 1</div>
<div id="content2" class="content2" >Objeto 2</div>
</div>