- Rotating Elements 4:37
- Animating a CSS Transform 4:22
- Skewing Content 3:48
- Scaling Elements 3:12
- Changing the Transform Position with transform-origin 7:01
- Moving Content with translate() 4:55
- Creating a Slide Transition 5:39
- Combining Transforms 3:36
- CSS Transforms Challenge 2 objectives
- Custom Timing Functions with cubic-bezier() 6:43
- Review: Getting Started with CSS Transforms 7 questions
Preview
Video Player
00:00
00:00
Creating a Slide Transition
5:39Now that you're familiar with translations in CSS transforms, you're going to use translateX() to create a slide transition.
Now that you're familiar with
translations and CSS transforms,
0:00
we're gonna use translate to create
a neat interaction feature using
0:04
the three images on the bottom row.
0:09
For these three images, I've added
a class of slide to the photo wrapper and
0:11
photo overlay containing the image title,
description and
0:17
Download button has an opaque
blue colored background area.
0:21
Now currently, these blue overlays
are positioned on top of the images.
0:26
So, we're not able to see the images yet.
0:30
So, we're going to use
the translateX function to position
0:32
the overlay area out of view and
initially display the image.
0:37
Then when a user hovers over
the slide container the title,
0:41
description and
button will slide in from the left while
0:45
the image slides out of view
from left to right, like this.
0:49
So for this to happen,
we need to transition the image and
0:57
photo-overlay div.
1:01
So back in interactions.css, I'll scroll
down here to the row three comment and
1:03
I'll create a new rule that
targets the photo-overlay div and
1:09
the images inside slide.
1:14
Inside this new rule, I'll add
the transition shorthand property and
1:28
I'll set transform as
the transition property and
1:34
the transition duration
value to .6 seconds.
1:37
Let's also add a timing
function of ease out.
1:41
So now, let's create the transforms.
1:47
Right below this rule,
I'll create a new rule
1:50
that targets the photo-overlay
div inside slide,
1:55
then I'll add the transform property and
2:01
I want to use the translateX
function here.
2:05
And inside the parenthesis,
I'll set the value to (-100%).
2:10
Once we refresh,
you can see how this pulls
2:17
the blue overlay div 100% to its left.
2:21
And since the slide elements
overflow is set to hidden,
2:25
that blue overlays now
completely out of view.
2:28
So to slide it back into view on hover,
I'm going to create
2:31
a new rule that targets photo overlay
when a user hovers over that slide div.
2:37
So I'll type slide:hover,
then the photo-overlay class.
2:43
I'll add a transform property.
2:53
Then to slide the photo
overlay back in to view,
2:56
I'm going to use the translateX
function and set the value to (0).
2:59
So, great.
3:08
Now, the photo-overlay slides
back to its original position.
3:09
Now finally,
I want an image to slide to the right and
3:14
out of view as the blue
overlay is sliding into view.
3:19
Back in my style sheet,
I'll create a new rule that targets
3:25
images inside the slide div once
a user hovers over the slide div.
3:30
Then I'll add the transform property and
3:40
what do you think our translate
function should look like for this one?
3:43
For the image to slide to the right and
out of view on hover,
3:48
I want to use the translateX function and
set the value to (100%).
3:53
So, let's take a look.
4:00
One side refresh the page and
hover over an image, great.
4:02
The images slide 100% to the right
of their original space and
4:07
out of view while the overlay content
area slides in from the left.
4:12
In this video, you learn that translate
gives you a different way to position and
4:22
move content on a page.
4:27
It's a method similar to relative and
absolute position.
4:28
So, then when do we use positioning
offsets instead of translate and
4:31
how do we know which method
is more appropriate?
4:35
CSS transforms
are a design-specific feature.
4:38
And generally,
used to enhance your content.
4:41
So, it's best to use the translate
functions over positioning offsets when
4:44
you wanna move elements on the page for
4:48
a design-specific reason like
to enhance user interactions.
4:50
Now CSS position offset are
layout-specific properties used to control
4:54
your layout and
the position of your content.
4:59
In our image gallery, we're using
the translateX function to shift elements
5:02
away from their current position
when a user interacts with them.
5:06
So you can say that this is
a design-specific motion, so
5:10
translate is better suited.
5:14
With a translate function, it's also
possible to achieve better performance
5:16
in most desktop and mobile browsers.
5:20
Translate can take advantage of a browser
feature called hardware acceleration to
5:22
help the transition run smoother than
a transition made with position opposites.
5:27
You can learn more about hardware
acceleration and CSS transforms by
5:32
visiting the links provided in
the teacher's notes of this video.
5:35