1. 首页
  2. css

CSS照片旋转

以下是Alex Young(@Theu alexyoung)的客串帖子。亚历克斯创造了一个简单的技术来\”旋转\”一张照片的主题,只需隐藏和显示多个堆叠在不同角度拍摄的照片。好好享受!网页设计师和开发者总是以有趣和引人入胜的方式与他们的网站互动,让我们着迷。我喜欢发现这些设计师/开发人员提出的新技术。我在Warby Parker的网站上看到了一个特别引起我兴趣的技术。他们能够创造一个很酷的效果,模型跟随用户的鼠标,展示不同角度的画面。

我见过这种技术主要用于炫耀太阳镜,但我有兴趣看看你们能为其他实际应用提供什么。

在我们开始之前,你们需要一些东西。准确地说,有七件事。你需要从七个不同的角度拍摄七张照片。

HTML设置

我们正在设置一个名为\”faces\”的容器,然后创建一个区域,我们将使用该区域来显示照片–\”face area\”。我们还有一个div来保存七个单独的图像。

<div>

Now we\"ll create a div这正是它的名字所暗示的。它将被放在另一个上面。我们可以把这个div分成7小列,然后把它们平分。这7列将用于在鼠标悬停在特定列上时侦听。将\"数据号\"添加到每个div将允许我们稍后在jQuery中引用每个div<div>

CSS Setup

Most of the CSS is pretty self-explanatory. There is one thing I need to mention that is important, make sure that the 7 columns fit perfectly together across the span

body {background: #333 }#faces {height: 333px;width: 500px;margin: 0 auto;border: 8px solid white;}#face-area {height: 500px;width: 333px;position: relative;}#the_faces_overlay {position: absolute;width: 500px;top: 0;left: 0;}#faces .the_faces {height: 333px;width: 14.2857143%;float: left;margin: 0;padding: 0;}

jQuery Setup

我们需要在每个列悬停时侦听。这就是那些\"数据数字\"派上用场的地方。如果我们想添加更多的列,就不必再添加任何JavaScript了。

//显示\"中心\"imagevar>

Tada!

你拿到了!现在你有了自己的头像模型。用它来炫耀你自己的产品。这个有很多用途。让我知道你的想法。

编者注:这将是一个添加触摸支持的有趣演示,不是吗?跟在刷卡什么的后面

CSS照片旋转 为WP2原创文章,链接:https://www.wp2.cn/css/css%e7%85%a7%e7%89%87%e6%97%8b%e8%bd%ac/

发表评论

您的电子邮箱地址不会被公开。