Click on the image to rotate it 180 degrees clockwise.
Click on the image to rotate it 90 degrees clockwise.
code:
<div class="grid_A">
<div class="grid_A">
<p class="spec">Click on the image to rotate it 180 degrees clockwise.</p>
<img src="../images/cartoon.jpg" id="image1" onclick="rotateImage();" alt="cartoon" />
<p class="spec">Click on the image to rotate it 90 degrees clockwise.</p>
<img src="../images/cartoon.jpg" id="image2" onclick="rotate();" alt="cartoon" />
</div>
<style>
#image1{margin-left: 3vw; width: 15vw; height: 15vw;}
#image2{margin-left: 3vw; width: 15vw; height: 15vw;}
.element {transform: rotate(90deg);}
</style>
<script>
function rotateImage() {
var img = document.getElementById('image1');
img.style.transform = 'rotate(180deg)';
}
function rotate() {
var img = document.getElementById('image2');
img.className = 'element';
}
</script>
</div>
Click on the button to rotate it 90 degrees anti-clockwise.
Click on the button to rotate it 90 degrees sequentially (clockwise).
code:
<div class="grid_A">
<p class="spec">Click on the button to rotate it 90 degrees anti-clockwise.</p>
<img src="../images/cartoon.jpg" id="image3" alt="cartoon" />
<button onClick="rotateImg() ">rotate image</button>
<p class="spec">Click on the button to rotate it 90 degrees sequentially (clockwise).</p>
<img src="../images/cartoon.jpg" id="image4" alt="cartoon" />
<button onClick="rotateImg2()">rotate image</button>
</div>
<style>
#image3{margin-left: 3vw; width: 15vw; height: 15vw;}
#image4{margin-left: 3vw; width: 15vw; height: 15vw;}
</style>
<script>
function rotateImg() {
document.querySelector("#image3").style.transform = "rotate(-90deg)";
}
let rotation = 0;
function rotateImg2() {
rotation += 90; // add 90 degrees
if (rotation === 360) {
// 360 means rotate back to 0
rotation = 0;
}
document.querySelector("#image4").style.transform = `rotate(${rotation}deg)`;
}
</script>
Click on the button to rotate it 90 degrees sequentially (anti-clockwise).
rotate by clicking the image (using setAttribute)
code:
<div class="grid_A spec">
<p class="spec">Click on the button to rotate it 90 degrees sequentially (anti-clockwise).</p>
<img id="sample" src="../images/cartoon.jpg" alt="picture" title="photo"/>
<button id="rotate-button">rotate image</button><br>
<p>rotate by clicking the image (using setAttribute)</p>
<img id="image5" src="../images/cartoon.jpg" onclick="turn();" alt="picture" title="photo"/>
</div>
<style>
#sample{margin-left: 3vw; width: 15vw; height: 15vw;}
#image5{margin-left: 3vw; width: 15vw; height: 15vw;}
</style>
<script>
var current_rotation = 0;
// change CSS transform property on click
document.querySelector("#rotate-button").addEventListener('click', function() {
// update total rotation
// if angle is positive, rotation happens clockwise. if negative, rotation happens anti-clockwise.
current_rotation -= 90;
// rotate clockwise by 90 degrees
document.querySelector("#sample").style.transform = 'rotate(' + current_rotation + 'deg)';
});
function turn(){
var img=document.getElementById('image5');
img.setAttribute('style','transform:rotate(180deg)');
}
</script>
normal position
rotated position
code:
<div>
<div class="normal">normal position</div>
<div class="rotated">rotated position</div>
</div>
<style>
.normal, .rotated {width: 80px; height: 80px; background-color: skyblue; margin-left: 10vw;}
.rotated {transform: rotate(45deg); background-color: pink; }
</style>
Gradually rotate the DIV element 180 degrees, and back:
A Div element
code:
<div class="spec">
<p>Gradually rotate the DIV element 180 degrees, and back:<p>
<div id="Div_1">A Div element</div>
</div>
<style>
#Div_1 {margin: 2vw auto; border: 0.1vw solid black; width: 12vw; height: 6vw;
background-color: coral; color: white; text-align: center; vertical-align: center;
animation: animate 5s infinite;}
@keyframes animate {
50% {transform: rotate(180deg);}
}
</style>
code:
<div class="loader-container">
<div class="loader"></div>
<p>Loading...</p>
</div>
<style>
.loader-container { display: flex; justify-content: center; align-items: center;
flex-direction: column; height: 40vh;}
.loader { width: 6vw; height: 6vw; border-radius: 50%; border: 0.3vw solid #0055ff;
border-top-color: transparent; animation: rotation 1s linear infinite;}
@keyframes rotation {
from {transform: rotate(0deg); }
to {transform: rotate(360deg);}
}
.loader-container p {font-size: 1.5vw; margin-top: 2vw;}
</style>
normal
Rotated and moved with matrix().
code:
<div class="rectangle">Rotated and moved with <code>matrix()</code>.</div>
<style>
.normal, .rectangle{width: 120px; height: 60px; padding: 12px; background: limegreen;
color: white; font-family: Helvetica, sans-serif;}
.rectangle {transform-origin: 0 0; transform: matrix(0.707107, 0.707107,
-0.707107, 0.707107, 150, 0); }
</style>
The parameters are as follow:
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).
This a normal div element.
Using the matrix() function.
Another use of the matrix() function.
Another use of the matrix() function.
code:
<div class="grid_A frame">
<p>The parameters are as follow: <br>matrix(scaleX(), skewY(), skewX(),
scaleY(), translateX(), translateY()).</p><br>
<div class="two">This a normal div element.</div>
<div class="two" id="myDiv1">Using the matrix() function.</div>
<div class="two" id="myDiv2">Another use of the matrix() function.</div>
<div class="two" id="myDiv3">Another use of the matrix() function.</div>
</div>
<style>
.frame{width: 50vw; height: 30vw;}
.two { width: 80px; height: 80px; background-color: lightgreen; border: 2px solid black;
padding: 1px;}
#myDiv1 {transform: matrix(1, -0.3, 0, 1, 0, 50);}
#myDiv2 {transform: matrix(1, 0, 0.5, 1, 50, 50);}
#myDiv3 {transform: matrix(2, 1, 0.5, 1, 90, 70);}
</style>
