Transforms and Transitions | Canvas, SVG and Drag and Drop ||WDD330📱
Transform
The transform property lets you translate, rotate, scale adn skew any element on the page. Examples as follows:
- transform: translate(45px, -45px);
- transform: scale(1.5, 0.25);
- transform: rotate(10deg)
- transform: skew(15deg, 4deg);
- transform-origin: 0 0;
- Choose your ordering carefully
Transitions
The transitions functions allow you to move elements left and right, up or down. These funcitons are similarto the behavior of
possitionL relative in CSS.
The translate(x,y) function moves an element x from the left, and y from the top:
transform: translate(45px, -45px);
Examples as follows:
- transition-property: transform, color;
- transition-duration: 0.2s;
- transition-timing-function: ease-out;
- transition-delay: 50ms;
- Short hand transition: transform 0.2s ease-out 50ms, color 0.1s linear 50ms;
Keyframes
- call with animation-name: x;
- animation-duration: 2s;
- animation-timing-function: ease-in
- animation-iteration-count: x;
- animation-direction: alternate;
- animation-delay: 50ms;
Example of simple animation
@keyframes moveRight {
from {
transform: translateX(-50%);
}
to {
transform: translateX(50%);
}
}
@keyframes appearDisappear {
0%, 100% {
opacity: 0;
}
20%, 80% {
opacity: 1;
}
}
@keyframes bgMove {
100% {
background-position: 120% 0;
}
}
@keyframes x {
//transform
}
Canvas
The Canvas is used to draw anything we can imagen and manipulate the screen and modify the DOM.
to use Canvas you need to use the tag canvas.
HTML
canvas id="myCanvas" class="myCanvas" width="200" height="200"
Sorry! Your browser doesn’t support Canvas.
/canvas
CSS
.myCanvas {
border: dotted 2px black;
}
JS
var canvas = document.getElementById("myCanvas");
Team Assignment
Reference
https://www.sitepoint.com/premium/books/html5-css3-for-the-real-world-2nd-edition/read/12/Contact me
📧Email me at iodaniel@byui.edu
- Lesson 01: Notes
- Lesson 02:
- Lesson 03:
- Lesson 04:
- Lesson 05:
- Lesson 06:
- Lesson 07:
- Lesson 08:
- Lesson 09:
- Lesson 10:
- Lesson 11: