当前位置:首页 » 《关注互联网》 » 正文

CSS 很神奇,是时候尝试 3D 了_努力是为了站在万人中央,成为别人的光

4 人参与  2021年07月15日 16:03  分类 : 《关注互联网》  评论

点击全文阅读


在这里插入图片描述
CSS 变换是CSS最通用和最神奇的属性之一。它不仅是在您的网站上实现流畅动画的最佳方式,而且您还可以使用CSS 3D 转换创造奇迹。
像这个🙀——

在这里插入图片描述

我提前为数个 GIF 占用您的互联网带宽而道歉,但我希望这是值得的!🤜🤛

但是等等,立方体的两个边都不见了!!!
我故意这样做是为了更容易理解和形象化。我会在文末添加获取上述结果的完整代码链接!

第一件事 - translate是如何工作的?

translate方法基本上将 HTML 元素从其实际位置移动,而不会干扰布局树上的任何其他兄弟/父元素。总而言之,translateX方法会左右移动元素,而translateY方法会上下移动元素。

在这里插入图片描述

但是 Z 轴到底是什么?

要可视化translate沿 Z 轴的工作方式,请想象您的 div 向您移动和远离您,而不是在屏幕上从上到下或从左到右 —

在这里插入图片描述
这怎么可能?网站被视为书的一页,对吗?屏幕上怎么可能有任何东西朝向你(或者远离你)?

你的div显然不是真实的,它给你一种它确实存在的感觉。让我们并排检查translate沿不同轴的变化值如何-

在这里插入图片描述

我不理解你,但绿色框看起来不像是接近或远离我。👺

我们如何解决这个问题?我们需要稍微改变一下我们的观点。😉

CSS 透视属性

如果不设置正确的perspective值,您将无法直观地检测 Z 轴的变化。

perspective属性定义了对象离用户多远。因此,较低的值会比较高的值产生更强烈的 3D 效果。
来源 - w3schools

让我们将以下 CSS 添加到三个框的父元素中——

在这里插入图片描述

而且,瞧——

在这里插入图片描述

旋转方法

顾名思义,rotate通过沿三个轴之一旋转元素来工作,给定度数。但是,我们需要对旋转如何沿不同轴进行一些可视化。

在这里插入图片描述
无透视的不同轴旋转

在这里插入图片描述
不同轴的旋转透视

立方体

让我们最终从立方体的侧面开始!我们将有四个面——底部、正面、背面和左侧——

在这里插入图片描述

我还向多维数据集的主要包装器添加了一些 CSS。

在这里插入图片描述

请注意,我已添加transform-style: preserve-3d;到容器中。这是渲染 3D children的关键步骤。每个面的大小是200px宽度和高度,我们需要记住这个值,因为我们必须添加translate关于边尺寸的值。
对于我们的立方体,每个面都将是一个绝对分割,我添加了指示它是哪个面的文本。我已经opacity: 0.5为每张面添加了,以便重叠清晰 -

在这里插入图片描述
为了将正面放在前面,我们添加translateZ(100px)了它。

在这里插入图片描述

嗯,这就是它的样子。🙁
那么我们如何制作这个 3D- ish呢?我们的知识在perspective这里派上用场。
将此 CSS 添加到我们的外部 —

在这里插入图片描述
另外,让我们让我们的背面倒退。因此,我们将添加与添加到正面的相反的内容。
在这里插入图片描述
结果 -

在这里插入图片描述
你能想象正面朝你走来而背面(黄色的)离开吗?如果它仍然不够直观,让我们尝试稍微旋转立方体包装器 -

在这里插入图片描述

是不是很神奇?
接下来,我们需要修复底面💁‍♀️。为了将底面放置到位,我们将沿 X 轴将其旋转90 度——

在这里插入图片描述

我们还必须移动它的位置,使其正好位于立方体的正面和背面之间。我们可以做的是,移动底面与正面对齐,然后旋转它。听起来很混乱?

步骤 — 1:将底面与正面对齐

CSS—

在这里插入图片描述
将底面与正面对齐

结果 -

在这里插入图片描述

第 2 步:将底面旋转 90 度

CSS—

结合旋转和平移底面
结合旋转和平移底面

结果 -

在这里插入图片描述
结合旋转和平移底面

底面现在安全无恙。但是 left 面有点卡在中间。🙍‍♀️ 首先,我们需要把它移到一边,然后旋转它。让我们将它在 X 轴上移动-100px,然后在 Y 轴上旋转它。

CSS —
在这里插入图片描述
结果——

在这里插入图片描述
瞧!我们的立方体快完成了。我建议您在每个轴上使用各种平移和旋转值,并尝试添加顶部和右侧轴以制作完整的立方体。

现在,最后但并非最不重要的,让我们旋转我们的立方体😍

CSS —
在这里插入图片描述
将上面的动画添加到我们的box-wrapper——

在这里插入图片描述
结果🤜🤛—

在这里插入图片描述
请参阅此Github存储库:https://github.com/wanghao221/css-cube
以获取相同的工作代码并尝试使用,因为CSS 3D是一个魔法池。💫

请注意——我已经调整了透视值并添加了动画来实现侧面的最终位置,以更清晰地说明变化。此外,我旋转box-wrapper了一点,以便从正确的角度最能看到变化。

往日相关文章:

  • 从0到1教你如何使用 p5.js 绘制简单的动画
  • 手把手教你使用 Java AWT 创建一个简易计算器
  • 使用 HTML、CSS 和 JavaScript 制作模拟时钟(初学者教程)
  • 超赞Win10日历悬停效果,爱了爱了(使用HTML、CSS和vanilla JS)

我已经写了很长一段时间的技术博客,并且主要通过CSDN发表,这是我的一篇技术文章/教程。我喜欢通过文章分享技术与快乐。请访问我的博客: https://haiyong.blog.csdn.net/ 以了解更多信息。希望你们会喜欢!这里汇总了我的全部原创及作品源码:GitHub

非常感谢您到达文章的结尾。如果你真的从这篇文章中学到了一些新东西,喜欢它,收藏它并与你的小伙伴分享。🤗最后,不要忘了❤或📑支持一下哦


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/23439.html

底面  旋转  立方体  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 公司商务宴,实习生私下把菜品换成了草莓绵绵冰附加完整在线阅读(杜瑞,潘望望)最近更新列表
  • 结婚当天未婚妻与男闺蜜热吻,殊不知我是豪门阔少惊天黑幕_沈舒韩斌林殊虐心反转_小说后续在线阅读_无删减免费完结_
  • 沈锦殊(宠妾灭妻?虐渣高嫁我被权宠天下)前文+全本完整阅读预售作品抢先看
  • 独家周屿,林小柔,江宇城小说小说大结局(重生后,我冷眼看未婚夫小秘书给甲方爸爸送盗版labubu)全篇在线下载阅读
  • 重生后,我送渣男下地狱见阎罗王续集_苏景琛笑笑老太太听书_小说后续在线阅读_无删减免费完结_
  • 一百,解释,油漆小说(高考过后,我给擦边男主播刷了一百万)TXT无套路在线+无广告结局
  • 掏空我后,全家逼我卖婚房未删减_妹妹宝马老公番茄热门_小说后续在线阅读_无删减免费完结_
  • 纪君范,亓霏霏小说完本章节前文+全篇阅读(被小三的反击战)连载中
  • 陈春花,池言(重生后,摆脱吸血鬼老公一家)前文+全本完整阅读预售作品抢先看
  • 错认皇太女后,三个皇夫悔疯了后续结局_春桃长青魏昭看点十足_小说后续在线阅读_无删减免费完结_
  • (重生后,恶毒女配拿稳白月光剧本)江朝华燕景最终篇章(江朝华燕景)全书在线无广告高口碑小说
  • 女儿遇险命悬一线,我却见死不救后续+完结_小姑娘雷达安静读者推荐_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1