html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- |< >|< |< -->
<!DOCTYPE html>
<html>
<head>
<title>
transform: rotate, skew, scale;
transform-origin.
</title>
</head>
<body>
<article>
<section>
<div id="divRect1">
<div id="divGreen">click</div>
</div>
</section>
<input id="plus" type="submit"
onclick="fncScalePlus()"value="+">
<input id="minus" type="submit"
onclick="fncScaleMinus()"value="–">
<br/>
<input id="skewY" type="range"
oninput="fncSkewY()" value="180"
min="0" max="360" step="1"/>
transform-origin: <span id="idOrigin">25% 75%;</span><br />
<input id="inpRotate" type="checkbox" checked/>
transform: rotate<span id="idRotat">(0deg);</span><br />
<input id="inpSkew"type="checkbox">
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
background-color: #abc;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
section {
overflow: scroll;
border: 2px inset #789;
background-color: #567;
}
div {
height: 100px;
width: 100px;
background-color: #32CD32;
display: flex;
justify-content: center;
align-items: center;
transform: skew(0deg);
-webkit-transform: skew(0deg);
}
#divRect1 {
position: relative;
margin: 90px;
padding: 10px;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
onload = alert("Hi!\n Here you can play with CSS transformation methods.\n\n To change the values of the transform-origin property, click on the green square.");
let scaleXY = 1;
function fncScalePlus(){
scaleXY+=.2;
divRect1.style.transform =
`scale(${scaleXY})`;
}
function fncScaleMinus(){
scaleXY-=.2;
divRect1.style.transform =
`scale(${scaleXY})`;
}
function fncSkewY(){
idSkew.innerHTML =
`(${rangHrz.value}deg,
${skewY.value}deg);`;
divRect1.style.transform =
`skewY(${skewY.value}deg)`;
}
function fncTransform(){
if(inpRotate.checked){
idRotat.innerHTML =
`(${rangHrz.value}deg);`;
divGreen.style.transform =
`rotate(${rangHrz.value}deg)`;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run