horizontal scrolling has been around for
quite a while and can be often seen on
personal portfolio and resume website so
in this tutorial we will show you how to
create it with pure CSS using transform
technique in just few minutes let's
check it out
the concept of this tutorial is to use
double CSS transform first we will
create content blocks and put them under
two layers of wrappers then we will
rotate the outer wrapper so the top side
is on the left and the bottom is on the
right this way we turn vertical scroll
into horizontal one then we rotate the
inner wrapper back so the content is in
the right position now let's start with
the HTML structure create double layers
of wrappers and a Content it's not
necessary to create multiple content
divs like this you can create a single
long content element if you like for CSS
first I'm going to set width and height
of each content div or a slide to 100%
of viewport again it's not necessary for
slide width to be equal then set the
layout of the inner wrapper to flex with
Flex direction as row this will put all
the slides next to each other on a
single line also set the width to 400
percent of the viewport we need to make
sure that the value is equal to total
width of the content depths and then set
different colors for each slide
now our divs are in place but we cannot
use mousewheel to scroll to yet let's
work on an other wrapper I will set the
outer wrapper size to 100% of the
viewport because we will need to rotate
this wrapper the trick is to set the
width to 100% of the viewport height and
height to 100% of the viewport width
Then use transform to rotate it by 90
degrees and set transform origin to
top-left then we will disable the x-axis
scroll and enable Y finally we will
apply the opposite rotation to the inner
wrapper now we can't see anything this
because the wrapper's position were
changed due to rotation so we need to
move them back we will just add
translateX and Y to the transform also
set the outer wrapper position to
absolute now we can use the mouse wheel
to scroll horizontally but the scroll
bar is taking up the content space and
it doesn't look nice so we will hide it
unfortunately there is no direct CSS
property to hide the scroll bar so we
will need to apply different methods for
each browser for Firefox we can set
scrollbar-width to none for ie family we
can use ms prefix ms-overflow-style for
Chrome and Safari we will need to use
WebKit scroll bar selector and set the
display to none
with this technique we can create an
interactive website by simply load a
seamless background image so that's all
for this tutorial hope you guys enjoy if
you want to see more development tips
and tutorials subscribe to our channel
for weekly videos thanks for watching
and see you next time bye
