〖大前端 - 基础入门三大核心之CSS篇㉑〗- 3D变形 与空间移动

这篇具有很好参考价值的文章主要介绍了〖大前端 - 基础入门三大核心之CSS篇㉑〗- 3D变形 与空间移动。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  • 当前子专栏 基础入门三大核心篇 也是免费开放阶段推荐他人订阅,可获取扣除平台费用后的35%收益
  • 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。
  • 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外,还可以通过加入星荐官共赢计划 加入私域社区。
  • 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 跨域学习者,从事过全栈研发、产品经理等工作,目前任某金融品类App负责人。
  • 荣誉:2022年度博客之星Top4博客专家认证、全栈领域优质创作者、新星计划导师“星荐官共赢计划” 发起人
  • 现象级专栏《白宝书系列》作者文章知识点浅显易懂且不失深度TFS-CLUB社区创立者旨在以“赋能 共赢”推动共建技术人成长共同体

  • 🏆 白宝书系列
    • 🏅 Python全栈白宝书
    • 🏅 产品思维训练白宝书
    • 🏅 全域运营实战白宝书
    • 🏅 大前端全栈架构白宝书

前端点击3d旋转,# ① - 基础入门三大核心篇,大前端全栈架构白宝书,大前端,前端基础入门,CSS,3D变形,空间移动

在上一章节,我们学到的变形都是2D变形,就是在一个平面变形。接下来我们来学习3D变形。3D变形依然使用 transform属性 来设置。


⭐️ 3D变形 - 3D旋转

首先,我们需要发挥一下想象力,将盒子想象成一个”演员“,需要在一个”舞台“上完成3D旋转。

所以我们首先需要有一个”舞台“,再有一个”演员“。

具体方式可以用div包裹p标签,也可以用section包裹div标签:


前端点击3d旋转,# ① - 基础入门三大核心篇,大前端全栈架构白宝书,大前端,前端基础入门,CSS,3D变形,空间移动

必须设置”舞台“,否则3d变形将失效。

perspective属性 用来定义透视强度,可以理解为 "人眼到舞台的距离",单位是 px

"演员" 的属性:

  • 绕横轴旋转:transform:rotateX();
  • 绕纵轴旋转:transform:rotateY();

下面看几个例子:

绕横轴旋转30度,人眼到舞台的距离是300px:


前端点击3d旋转,# ① - 基础入门三大核心篇,大前端全栈架构白宝书,大前端,前端基础入门,CSS,3D变形,空间移动

绕Y轴旋转;同时绕X轴和Y轴旋转:


前端点击3d旋转,# ① - 基础入门三大核心篇,大前端全栈架构白宝书,大前端,前端基础入门,CSS,3D变形,空间移动

3D旋转是CSS3新增属性里非常有趣的属性。真的很强大。


⭐️ 3D变形 - 空间移动

空间移动的前提条件:元素添加过3D旋转。

元素经过3D旋转后,可继续添加translateX()、translateY()、translateZ()、属性,让元素在空间进行移动。

空间移动其实就是在3D坐标系中移动,但是一定要注意XY轴所在的面不是我们的网页面,而是元素旋转之后所在的那个面。z轴垂直于元素自己的面,而不是网页面


前端点击3d旋转,# ① - 基础入门三大核心篇,大前端全栈架构白宝书,大前端,前端基础入门,CSS,3D变形,空间移动

一定要记住,空间移动要加在3D旋转之后:

下面看个例子:


前端点击3d旋转,# ① - 基础入门三大核心篇,大前端全栈架构白宝书,大前端,前端基础入门,CSS,3D变形,空间移动

为了帮助大家理解,我们可以做两个盒子,一个做一下空间移动,一个不做空间移动。


前端点击3d旋转,# ① - 基础入门三大核心篇,大前端全栈架构白宝书,大前端,前端基础入门,CSS,3D变形,空间移动

注意Z轴是从里指向外的。

利用3D旋转和空间移动可以制作很多很丰富的过渡和动画,在下面我们就会学习过渡和动画。文章来源地址https://www.toymoban.com/news/detail-779028.html

到了这里,关于〖大前端 - 基础入门三大核心之CSS篇㉑〗- 3D变形 与空间移动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 〖大前端 - 基础入门三大核心之JS篇(57)〗- 继承

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超级个体得主、谷

    2024年02月03日
    浏览(43)
  • 〖大前端 - 基础入门三大核心之JS篇(55)〗- 内置对象

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超级个体得主、谷

    2024年02月04日
    浏览(59)
  • 〖大前端 - 基础入门三大核心之JS篇(58)〗- 面向对象案例

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超级个体得主、谷

    2024年02月03日
    浏览(60)
  • 〖大前端 - 基础入门三大核心之JS篇(56)〗- 内置构造函数

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超级个体得主、谷

    2024年02月04日
    浏览(53)
  • 〖大前端 - 基础入门三大核心之JS篇㉓〗- JavaScript 的「数组」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月04日
    浏览(67)
  • 〖大前端 - 基础入门三大核心之JS篇(53)〗- 构造函数与类

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超级个体得主、谷

    2024年02月02日
    浏览(59)
  • 〖大前端 - 基础入门三大核心之JS篇㊼〗- BOM基础之window对象

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超

    2024年02月05日
    浏览(54)
  • 〖大前端 - 基础入门三大核心之JS篇㉟〗- JavaScript 的DOM简介

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超

    2024年02月04日
    浏览(53)
  • 〖大前端 - 基础入门三大核心之JS篇㉔〗- JavaScript 的数组的常用方法 (一)

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月07日
    浏览(55)
  • 〖大前端 - 基础入门三大核心之JS篇㊿〗- 面向对象之对象的方法、遍历、深浅克隆

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超级个体得主、谷

    2024年02月04日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包