手把手教你：如何用纯CSS实现旋转相册

一条会coding的Shark
2,138 阅读4分钟

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

  在上个月，我使用纯 css 打造了一个旋转图片展示器，对它感兴趣的小伙伴们可以去我的主页看看这篇文章。这次，经过一个多月的沉淀，我将在此基础上加入一些新属性和新功能，打造出展示器Pro 版，又可称之为属于你心中的 梦中情册。

在展示器Pro 版中，你将能看到这些新增效果：

  • 更丝滑的3D旋转

  • 更细节的悬停效果

  • 更完美的颜色搭配

  有了这些的加入，将能完成旋转图片展示器 -> 3D旋转相册的完美蜕变。

代码块和效果展示

代码块 3Dbook - 码上掘金 (juejin.cn)

效果 3Dpro.gif

实现过程

  看完效果展示后，不知各位小伙伴们是否心动于这个相册。接下来就由我来手把手教你打造这个属于你心中的梦中情册。

前期准备

  首先我们准备好旋转图片展示器。在这里我简单介绍一下搭建过程，想了解更详细的过程可以参考我之前的文章分享 十分钟时间带你手撸一个会旋转的图片展示器。

  准备好一些照片或者图片，将它们放在一个容器里。并且给照片或者图片加上边框，让它更加生动形象。然后通过 transform 属性设置整体为3D效果，通过 animation 属性设置其为无限旋转以及动画。最后通过设置并调整角度以及其他相关属性完善其细节，这样差不多就可以了。

3D旋转

  这里再来详细说说3D旋转。3D旋转我们可以分成两部分，一是3D，二是旋转。3D效果通过属性 transform-style: preserve-3d 实现。旋转通过属性 animation: identifier 15s linear infinite 来设置。对于旋转动画的角度，需要用 @keyframes 来制定动画规则。

.wrap{
    width: 300px;
    height: 200px;
    margin: 200px auto;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-16deg);
    animation: identifier 15s linear infinite;
}

  制定一个名为 identifier 的动画，规定好旋转的角度。from...to... 等价于 0% ~ 100%。通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。同理，rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

@keyframes identifier {
    from{
        transform: rotateX(-16deg) rotateY(0deg);
    }
    to{
        transform: rotateX(-16deg) rotateY(360deg);
    }
}

悬停效果

  悬停效果，顾名思义，就是当鼠标移动到某张图上后就会停止旋转。在我的上一篇文章里，便运用到了悬停效果展示。这里可以通过 hover选择器来设置。该选择器用于选择鼠标指针浮动在上面的元素。因为是使动画停止，所以可以用动画的属性 animation-play-state: paused，该属性可以让在运行的 animation动画停止。

image.png

.wrap:hover{
    animation-play-state: paused;
}

  为了增加用户体验，可以在鼠标放上去后添加一些效果，比如设置 cursor: pointer 让鼠标指针形状变为一只手；添加 transition 过渡属性，让变化过程变得更加柔顺自然；添加 filter 属性定义可视效果，比如这里为了更具有复古特色，定义了灰度从 0.8~1 的变化；设置 transform: scale(1.3,1.3) 让变化后的图片放大 1.3 倍。

img{
    filter: grayscale(0.8);
    cursor: pointer;
    transition: all .5s ease;
    border: 6px solid white;
    box-shadow: 1px 1px 5px #333333;
}
img:hover{
  filter: grayscale(0);
  transform: scale(1.3,1.3);
}

复古色

  所谓复古，就是给背景以及图片添加具有复古特色的颜色。比如对于整体，设置颜色为 background-color: #CDD1C3；对于图片，定义了灰度的变化 filter: grayscale(0.8)/ filter: grayscale(0)，这些都具有复古特点，各位小伙伴们可以多多尝试。

body{
    padding: 0;
    margin: 0;
    background-color: #CDD1C3;
}
img{
    filter: grayscale(0.8);
}
img:hover{
  filter: grayscale(0);
}

最终一览

代码块 3Dbook - 码上掘金 (juejin.cn)

效果 3Dbook.gif

结语

  看完了整体过程，各位小伙伴们对这个 旋转相册 是否跃跃欲试？整体而言实现起来是很容易的，所以跃跃欲试的小伙伴们话就去行动起来，打造一个属于你心中的梦中情册🔥

avatar
文章
阅读
粉丝