我们在浏览一些图片素材的网站时，图片的效果非常棒，今天我们就来实现其中的一种效果，使用css实现鼠标滚轴水平方向浏览图片库。
<html>
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png"
href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon"
href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="image/x-icon"
href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
color="#111">
<title>css实现鼠标滚轴水平方向浏览图片库www.woaidaogu.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Hepta+Slab:300,500" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
/* Inspired by this pen by Pieter Biesemans https://codepen.io/pieter-biesemans/pen/BQBWXX and My Mother Before Me project http://mymotherbeforeme.com/ */
body {
font-family: Hepta Slab, sans-serif;
font-weight: 500;
background: #efecdb;
color: #5D4037;
}
* {
box-sizing: border-box;
}
/* hide scrollbar */
::-webkit-scrollbar {
width: 1px;
height: 1px;
}
::-webkit-scrollbar-button {
width: 1px;
height: 1px;
}
.external {
overflow: hidden;
height: 100vh;
}
.horizontal-scroll-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100vh;
transform: rotate(-90deg) translate3d(0, -100vh, 0);
transform-origin: right top;
overflow-y: auto;
overflow-x: hidden;
padding: 0;
height: 100vw;
perspective: 1px;
transform-style: preserve-3d;
padding-bottom: 10rem;
}
.img-wrapper {
transform: rotate(90deg);
display: flex;
align-items: center;
justify-content: center;
min-height: 40vh;
transform-origin: 50% 50%;
transform: rotate(90deg) translateZ(.1px) scale(0.9) translateX(0px) translateY(-3vh);
transition: 1s;
}
.img-wrapper:hover {
min-height: 65vh;
}
.slower {
transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(0%) translateY(-10vh);
}
.slower1 {
transform: rotate(90deg) translateZ(-.25px) scale(1.05) translateX(0%) translateY(8vh);
}
.slower2 {
transform: rotate(90deg) translateZ(-.3px) scale(1.3) translateX(0%) translateY(2vh);
}
.slower-down {
transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(0%) translateY(16vh);
}
.faster {
transform: rotate(90deg) translateZ(.15px) scale(0.8) translateX(0%) translateY(14vh);
}
.faster1 {
transform: rotate(90deg) translateZ(.05px) scale(0.8) translateX(0%) translateY(10vh);
}
.fastest {
transform: rotate(90deg) translateZ(.22px) scale(0.7) translateX(-10vh) translateY(-15vh);
}
.vertical {
transform: rotate(90deg) translateZ(-.15px) scale(1.15) translateX(0%) translateY(0%);
}
.last {
transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(25vh) translateY(-8vh);
}
.scroll-info,
header {
position: absolute;
left: 1rem;
}
header {
bottom: 1rem;
}
.scroll-info {
top: 1rem;
}
a {
color: inherit;
font-weight: 500;
}
h1 {
font-weight: 300;
font-size: 1rem;
}
.img-wrapper a {
overflow: hidden;
display: block;
padding: 1vh;
background: #efecdb;
box-shadow: 0 10px 50px #5f2f1182;
}
img {
max-width: 45vh;
max-height: 50vh;
transition: .5s;
vertical-align: top;
filter: saturate(40%) sepia(30%) hue-rotate(5deg);
}
a:hover img {
filter: none;
}
p {
margin: 0;
}
.scroll-info {
display: flex;
align-items: center;
}
.icon svg {
width: 50px;
fill: currentcolor;
}
</style>
<script>
window.console = window.console || function (t) { };
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<div>
<div>
<div class="img-wrapper slower">
<a href="https://altphotos.com/photo/stylish-parisian-cafe-terrace-279/" target="_blank" rel="noopener"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/paris-cafe-terrace.jpg" alt="">
</a>
</div>
<div class="img-wrapper faster">
<a href="https://altphotos.com/photo/retro-boy-doll-wearing-elegant-clothes-330/" target="_blank"
rel="noopener">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/antiquedollboy.jpg" alt="">
</a>
</div>
<div class="img-wrapper slower vertical">
<a href="https://altphotos.com/photo/clocks-shop-exposition-window-reflecting-the-streets-277/" target="_blank"
rel="noopener">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/windowshopclock.jpg" alt="">
</a>
</div>
<div class="img-wrapper slower slower-down">
<a href="https://altphotos.com/photo/swans-and-ducks-swimming-in-a-river-264/" target="_blank" rel="noopener">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/swanduckriver.jpg" alt="">
</a>
</div>
<div>
<a href="https://altphotos.com/photo/sidewalk-terrace-of-a-blue-facade-cafe-312/" target="_blank"
rel="noopener">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/cafe-terrace.jpg" alt="">
</a>
</div>
<div class="img-wrapper slower">
<a href="https://altphotos.com/photo/paris-waterfront-at-sunset-1555/" target="_blank" rel="noopener">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/paris-seine-boat.jpg" alt="">
</a>
</div>
<div class="img-wrapper faster1">
<a href="https://altphotos.com/photo/old-man-leaning-over-the-barrier-looking-at-the-river-265/" target="_blank"
rel="noopener">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/old-man-river.jpg" alt="">
</a>
</div>
<div class="img-wrapper slower slower2">
<a href="https://altphotos.com/photo/cafe-terrace-with-a-row-of-retro-tables-261/" target="_blank"
rel="noopener">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/cafe-table-street.jpg" alt="">
</a>
</div>
<div>
<a href="https://altphotos.com/photo/street-scene-with-pedestrians-and-dogs-318/" target="_blank"
rel="noopener">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/street-scene-people.jpg" alt="">
</a>
</div>
<div class="img-wrapper slower">
<a href="https://altphotos.com/photo/tourist-barge-on-the-river-seine-near-notre-dame-266/" target="_blank"
rel="noopener">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/notre-dame-river-boat.jpg" alt="">
</a>
</div>
<div class="img-wrapper slower last">
<a href="https://altphotos.com/photo/skulls-decoration-in-a-shop-window-331/" target="_blank" rel="noopener">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/shop-window-reflection.jpg" alt="">
</a>
</div>
</div>
<p><span><svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">
<path
d="M50,67.1c-0.6,0-1.2-0.2-1.8-0.7c-3.8-3.8-7.7-7.7-11.5-11.5c-2.3-2.3,1.2-5.8,3.5-3.5c2.5,2.5,4.9,4.9,7.4,7.4 c0-13.7,0-27.4,0-41.2c0-0.6,0.2-1.2,0.5-1.5c0,0,0,0,0,0c0.4-0.6,1.1-1,2-0.9c13.7,0.3,26.4,7.2,33.5,19.1 C96.5,55.9,84.7,85,60.2,91.6C35.5,98.2,11.6,79.1,11.1,54c-0.1-3.2,4.9-3.2,5,0c0.3,13.8,8.4,26.4,21.3,31.5 c12.5,5,27.1,1.9,36.6-7.5c9.5-9.5,12.5-24.1,7.5-36.6c-4.8-12.1-16.3-20.1-29-21.2c0,12.8,0,25.5,0,38.3 c2.5-2.5,4.9-4.9,7.4-7.4c2.3-2.3,5.8,1.3,3.5,3.5c-3.9,3.9-7.8,7.8-11.8,11.8C51.2,66.9,50.6,67.1,50,67.1z">
</path>
</svg></span> Try scrolling down</p>
<header>
<p>Postcards from Paris.</p>
<h1>Css-only parallax horizontal gallery</h1>
<p>Grab (these and more) photos from - <a href="https://altphotos.com/free/paris/" target="_blank"
rel="noopener">altphotos.</a></p>
</header>
</div>
<script
src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script id="rendered-js">
/* Inspired by this pen by Pieter Biesemans https://codepen.io/pieter-biesemans/pen/BQBWXX and My Mother Before Me project http://mymotherbeforeme.com/ */
//# sourceURL=pen.js
</script>
<div id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;">
<div></div>
<a id="xl_chrome_ext_download" href="javascript:;">下载视频</a>
<a id="xl_chrome_ext_close" href="javascript:;"></a>
</div>
</body>
</html>通过以上内容我们知道了css如何实现鼠标滚轴水平方向浏览图片库？感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！
