一个元素即可实现 3D 插图效果

简介: 仅使用一个 <img> 标签,使用一个小技巧就可以创建一个 3D 插图,没有为伪元素,没有其他其他标签,没使用 SVG。仅仅是一个标签配合一些 CSS 样式。

image.png


一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第22天,点击查看活动详情


仅使用一个 <img> 标签,使用一个小技巧就可以创建一个 3D 插图,没有为伪元素,没有其他其他标签,没使用 SVG。仅仅是一个标签配合一些 CSS 样式。


效果图如下:


image.png


不错哦~


我们来看下代码,分解下:


<img src="https://picsum.photos/id/1069/500/300" >
复制代码


html 代码没什么好说的了吧~ 就是一个 img 标签。


img {
  --x:10px;
  --y:20px;
  clip-path:polygon(
       var(--y)              var(--y),
       calc(100% - var(--y)) var(--y),
       calc(100% - var(--y)) calc(100% - var(--y)),
       var(--y)              calc(100% - var(--y)),
       0 calc(100% - var(--x) - var(--y)),
       0 calc(var(--x) + var(--y)));
  margin:30px;
  transform:perspective(1000px) rotateY(40deg);
  outline: var(--y) solid rgba(0,0,0,0.4);
  outline-offset: calc(-1*var(--y));
  padding:var(--y) var(--y) var(--y) 0;
  transition:1s all;
  max-width:100%;
  display:block;
  margin:auto;
}
img:hover {
  transform:perspective(1000px) rotateY(0deg);
  clip-path:polygon(
       var(--y)              var(--y),
       calc(100% - var(--y)) var(--y),
       calc(100% - var(--y)) calc(100% - var(--y)),
       var(--y)              calc(100% - var(--y)),
       var(--y)  calc(100% - var(--x) - var(--y)),
       var(--y)  calc(var(--x) + var(--y))
    );
}
复制代码


我们先对 img 原始的样式了解~


我们先预设变量 --x: 10px;--y: 20px。然后第一步对 <img> 标签添加轮廓:


/* [1] outline */
outline: var(--y) solid rgba(0,0,0,0.4);
复制代码


image.png


第二步,添加轮廓的偏移:


/* [2] outline-offset */
outline-offset: calc(-1*var(--y));
复制代码


相当于给图片添加了边框的遮罩层。


image.png


第三步,使用 padding 保留图片左侧的轮廓遮罩。


/* [3] padding */
padding:var(--y) var(--y) var(--y) 0;
复制代码


image.png


之后,我们使用路径裁切 clip-path,将图片裁剪出一个多边形 -- 使用 polygon


/* [4] clip-path */
clip-path:polygon(
       var(--y)              var(--y),  /* a 点 */
       calc(100% - var(--y)) var(--y),  /* b 点 */
       calc(100% - var(--y)) calc(100% - var(--y)), /* c 点 */
       var(--y)              calc(100% - var(--y)), /* d 点 */
       0 calc(100% - var(--x) - var(--y)), /* x 点 */
       0 calc(var(--x) + var(--y))); /* y 点 */
复制代码


image.png


咦,这样看着是不是像 3d 图片了呢~


为了更加逼真,我们加上 tranform 属性:


/* [5] transform */
transform:perspective(1000px) rotateY(40deg);
复制代码


image.png


这里我们使用了透视效果,相当于,我们在 Z 轴上距离原点 1000px 处防止了投影仪;让后我们将图在 y 轴上正向旋转 40 度。


下面我们加上 hover 效果,先上图:


image.png


我们对裁切的路径的点做出了调整,上面是 hover 稳定后的效果图,更改了点 x -> x'y -> y' 两处,并恢复了图片在 y 恢复为 0,如下:


transform:perspective(1000px) rotateY(0deg);
clip-path:polygon(
       var(--y)              var(--y), /* a 点 */
       calc(100% - var(--y)) var(--y), /* b 点 */
       calc(100% - var(--y)) calc(100% - var(--y)), /* c 点 */
       var(--y)              calc(100% - var(--y)), /* d 点 */
       var(--y)  calc(100% - var(--x) - var(--y)), /* x' 点 */
       var(--y)  calc(var(--x) + var(--y))); /* y' 点 */
复制代码


当然,为了动画更加平滑,需要添加 transition 效果,这里添加了:


transition:1s all;
复制代码


表明所有的动画将在 1s 内平滑移动。


当然,上面只是对图片的左边进行 3D 透视效果而已,你可以对其底部进行透视,比如:


image.png


本文翻译自 3D image with one element,采用意译。


上面的知识点,你学废了没? 💨


相关文章
|
9月前
|
存储 小程序 API
oss防盗链设置(Referer Configuration)
oss防盗链设置(Referer Configuration)
1658 5
|
IDE Linux 开发工具
IntelliJ IDEA2022破解IDEA2022.2永久破解激活教程
IDEA 目前已经更新到最新的 2022.2.2 版本了,群里的小伙伴私聊问我,为啥之前 2021.3.1 的激活套路对新版本 2022.2.2 不管用了,是个什么情况? 很显然,IDEA 官方发现了这种破解路数,新版本加入了更严厉的反制破解。所以说,小伙伴们破解成功了以后,尽量不要升级 IDEA, 不然大概率又不行了。 好在z大又更新了新的补丁,针对最新版本,这边笔者亲测可行,仅以下文记录本人 IntelliJ IDEA 2022.2.2 版本的激活破解到 2099 年的全过程,步骤非常详细,跟着图文来就行~
47888 3
IntelliJ IDEA2022破解IDEA2022.2永久破解激活教程
|
存储 弹性计算 Cloud Native
阿里云产品免费试用规则介绍及可试用云产品整理
阿里云免费试用活动是阿里云为新手用户提供的免费体验的权益,包括免费云服务器、免费云存储、免费数据库以及AI试用等,旨在为新手开发者提供0成本高质量的上云体验服务,打造开放,敏捷的开发者环境,让企业和个人轻松享受云服务。本文为大家详细介绍下阿里云产品免费试用活动规则及可试用云产品整理,以供参考。
1812 2
阿里云产品免费试用规则介绍及可试用云产品整理
|
机器学习/深度学习 人工智能 编解码
3D AI生成出新玩法了:无需数小时,只要45秒,单张图片即可生成 3D模型
3D AI生成出新玩法了:无需数小时,只要45秒,单张图片即可生成 3D模型
637 0
|
前端开发 API 开发工具
批量提取某音文案
本文介绍了批量提取文案的思路, 以及操作过程中的问题的处理方法, 并给了详细的参考代码, 以及对应的文档.
308 0
|
机器学习/深度学习 Web App开发 人工智能
【OpenVI—AI热点日报】8月21日
AI热点日报八月第13期隆重推出! 我们汇集了最新的AI热点信息、最新论文和观点,为您提供最前沿的AI领域资讯。 (往期链接请在子社区查看官方博文哦~)
331 1
|
3天前
|
人工智能 自然语言处理 Shell
深度评测 | 仅用3分钟,百炼调用满血版 Deepseek-r1 API,百万Token免费用,简直不要太爽。
仅用3分钟,百炼调用满血版Deepseek-r1 API,享受百万免费Token。阿里云提供零门槛、快速部署的解决方案,支持云控制台和Cloud Shell两种方式,操作简便。Deepseek-r1满血版在推理能力上表现出色,尤其擅长数学、代码和自然语言处理任务,使用过程中无卡顿,体验丝滑。结合Chatbox工具,用户可轻松掌控模型,提升工作效率。阿里云大模型服务平台百炼不仅速度快,还确保数据安全,值得信赖。
157353 24
深度评测 | 仅用3分钟,百炼调用满血版 Deepseek-r1 API,百万Token免费用,简直不要太爽。
|
5天前
|
人工智能 API 网络安全
用DeepSeek,就在阿里云!四种方式助您快速使用 DeepSeek-R1 满血版!更有内部实战指导!
DeepSeek自发布以来,凭借卓越的技术性能和开源策略迅速吸引了全球关注。DeepSeek-R1作为系列中的佼佼者,在多个基准测试中超越现有顶尖模型,展现了强大的推理能力。然而,由于其爆火及受到黑客攻击,官网使用受限,影响用户体验。为解决这一问题,阿里云提供了多种解决方案。
17006 37
|
13天前
|
机器学习/深度学习 人工智能 自然语言处理
PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型
DeepSeek 系列模型以其卓越性能在全球范围内备受瞩目,多次评测中表现优异,性能接近甚至超越国际顶尖闭源模型(如OpenAI的GPT-4、Claude-3.5-Sonnet等)。企业用户和开发者可使用 PAI 平台一键部署 DeepSeek 系列模型,实现 DeepSeek 系列模型与现有业务的高效融合。
|
5天前
|
并行计算 PyTorch 算法框架/工具
本地部署DeepSeek模型
要在本地部署DeepSeek模型,需准备Linux(推荐Ubuntu 20.04+)或兼容的Windows/macOS环境,配备NVIDIA GPU(建议RTX 3060+)。安装Python 3.8+、PyTorch/TensorFlow等依赖,并通过官方渠道下载模型文件。配置模型后,编写推理脚本进行测试,可选使用FastAPI服务化部署或Docker容器化。注意资源监控和许可协议。
1311 8

热门文章

最新文章