PROJECTS
Vectors and matrices
VECTORS AND MATRICES
we are using CodePen but, of course, you can use your
own favourite editor and development environment.MATHS REFRESHER
Before we lose ourselves in the matrix, let’s have a
quick look at vectors. Vectors are used and applied
in many areas of science as a representation of
direction and magnitude. One of the simpler ways
of describing a vector on the plane would be on a
Cartesian coordinate system. We can do that by
drawing vectors as arrows.
Adding, subtracting, multiplying and other
operations can be performed on vectors in a similar
way as coordinates. Say we have vector AB(8, 2) and
vector AC(2, 6). They can be added, subtracted or
multiplied in the following ways:ADDITION:
AB + AC = AD
(8, 2) + (2, 6) = (8 + 2, 2 + 6) = (10, 8)SUBTRACTION:
AB - AC = AD
(8, 2 ) – (2, 6) = (8 – 2, 2 – 6) = (6, –4)MASTER VECTORS
AND MATRICES
Francesca Cuda reveals how you can use maths to perform precise CSS
transformations on sites
In a world of fancy designs and delightful
animations, designers and developers strive for
ways to get the most out of CSS. This is particularly
true if developers and designers aim to achieve the
same experience across a range of browsers.
Libraries and open-source solutions are proliferating
but sometimes the most effective tools lie in the
default CSS properties and some clever maths.
In this context, CSS transform is one of the unsung
heroes of a style transformation. Compared to pre-
built libraries, it gives fine-grained, pixel-level
control over the transformation and enables users to
scale, rotate, skew and flip objects.
To get the most out of the CSS transform
operation, we need to go back to the linear algebra
and geometry in which transform is rooted. Don’t
panic: this is not going to be a flashback of your
school years with lots of formulae and complicated
representations. We are going to brush up on some
concepts around matrices and vectors to bring clarity
to the murky values in CSS transform and achieve
the fanciest visual rendering. We’ll then move into
examples of how to apply the refreshed concepts to
the CSS transform syntax. Throughout the article,ABOUT THE AUTHOR
FRANCESCA
CUDA
job: Technical director,
ustwo London
areas of expertise:
JavaScript, React, CSS3Right Vectors represent
direction and magnitude.
One of the simpler ways
of describing them is using
a Cartesian coordinate
system
Far right Adding vectors
AB(8, 2) and AC(2, 6) to
create the new vector
AD(10,8)View source
files here!
All the files you need for
this tutorial can be found at
https://codepen.io/ustwo-ldn/
pen/bzNyMM