respectively. Using chained animations,
he morphs the element’s offset- path
property while moving the element along
this path by adjusting offset-distance,
ranging from 0% to 100%. For easier
visualisation, he’s helpfully included
the actual SVG path, which he morphs
using the same CSS custom property
he’s created for the offset-path. This
offers us a great way to move elements
around our viewport with a great deal
more complexity than would be possible
simply using transforms and adds the
opportunity to fully visualise the motion
first with SVG.3D CSS animation
Sometimes two dimensions just aren’t
enough, right? Sometimes you want to
offer your users a sense of depth that
transcends the flat environments and
design concepts we’ve come to embrace- and CSS offers a way to do just that, as
evidenced by this stunning recreation
of the Starfox Arwing Drone by Yusuke
Nakaya (https://codepen.io/YusukeNakaya/
pen/LvePgj).
You’ll notice the initial HTML is all
preprocessed with Pug, which offers an
efficient way to generate the over 400
cursor-interactive elements necessary to
‘control’ the spacecraft on its flight. He’s
also making use of SCSS to efficiently
loop through each of these elements and
assign controls to the craft.
Before taking a look at how he’s
constructed the spacecraft, let’s first note
that he’s defined a perspective of 500px on
the body element. Perspective accepts
a singular value that can change the
appearance of your 3D CSS elements; the
greater the perspective, the less depth
will be apparent across the Z-plane.
As you can see in his Pug markup, he’s
defined his elements in a fairly useful
manner; craft body, wings, boosters and
so on are all clearly marked. In order to
form some of the more specific shapes,
such as the many triangles, he’s used
the clip-path property. After placing the
elements within the general wrapping
element he rotates and translates each
into place across X, Y and Z planes
until they’re placed appropriately. He’s
utilised another Pug loop to add 40 stars
to the scene and used SCSS’s random()
function to scatter them around the
scene at varying lengths. One thing to
note about randomisation with SCSS:
the random value is assigned at the time
of compilation, so these values remain
static rather than updating with each
animation iteration.
While the stars appear to be flying
towards the user along the Z plane as the
craft lurches forward and backwards,
Nakaya has vertically rotated the
containing elements using rotateX()
(yes, rotateX() will rotate your element
forwards and backwards, rotateY() left to
right, effectively) and then allows these
elements to traverse this plane simply
using translateY()..awing {
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
transform: scale(1.5) rotateY(180deg)rotateX(90deg);
}
.fly.o-y {
transform-style: preserve-3d;
transition: 500ms;
animation: flyY random(10000) + 10000ms
cubic-bezier(0.545, 0.080, 0.520, 0.975)
infinite;
}
@keyframes flyY {
0% {
transform: translateY(0px); }
25% {
transform: translateY(200px); }
50% {
transform: translateY(0px); }
75% {
transform: translateY(-200px); }
100% {
transform: translateY(0px); }
}Add in some Grid
Let us return back to those 400+ cursor-
interactive elements: Nakaya has utilised
CSS Grid to lay them in a repeating
sequence of columns and rows within
their container, which is placed above
all other page elements. To this he has
applied pointer-events: none in order to
avoid any conflict with this grid. Next
up, SCSS is used to iterate through these
elements and apply some hover actions to
the spacecraft’s container, again by way
of the general sibling combinator..trigger:nth-child(1):hover ~ .monitor
.camera.o-y { -webkit-transform:
rotateY(27deg);
transform: rotateY(27deg); }
.trigger:nth-child(2):hover ~ .monitor
.camera.o-y { -webkit-transform:
rotateY(24deg);
transform: rotateY(24deg); }Lastly, Nakaya adds an active state to all of
these grid elements. The ship’s wrapping
element utilises a really neat cubic-bezier
transition, which is coupled with a
360-degree translateY() property to “do a
barrel roll!” when clicked and held.
These are just a few examples but,
as you can see, CSS actually has the
power to create some truly stunning
animations. So why not give it a go?Above Perspective changes the appearance of your 3D CSS elements; the greater the perspective, the less depth will be apparent
Create CSS animations