• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > CSS transform中rotate能不能实现以对角线为轴进行旋转?

CSS transform中rotate能不能实现以对角线为轴进行旋转?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含transform,rotateY,rotateX,origin,rotate等相关知识,匿名希望在学习及工作中可以帮助到您
如图中名为in的div,用rotate以AD为轴进行“斜的旋转”可以实现吗?
我进行的尝试,transform-origin属性好像只能将坐标轴进行偏移但没办法令其旋转,所以旋转的轴都是水平或者垂直的...rotateX()和rotateY()的搭配也不太可行...
要怎么样才能实现这种旋转?

回复内容:

谢邀,
你的需求和origin并没有直接的关系。
就在你当前页改的哦:

结果:
前三个是(x,y,z)矢量坐标, 第四个是角度

而且,既然transform是支持matrix函数的,理论上是可以应用任意三维变换的,同学你思维不用停留在css提供的便利函数。

你甚至也可以不使用transform而使用别的css属性配合矩阵运算来实现3d,就更灵活了,安利下之前做的DEMO
GitHub - leeluolee/clip3d: 3D rendering with css:clip-path


当然实用性目前接近0 谢邀
用rotate3d(1,1,0,xxdeg) xx是角度值 对于这种情形,你应该使用 matrix3d 做矩阵变化的运算

您可能想查找下面的文章:

  • HTML5 transform三维立方体实现360无死角三维旋转效果
  • css3 transform 3d 使用css3创建动态3d立方体(html5实践)
  • 带你了解css中的3D效果
  • CSS transform中rotate能不能实现以对角线为轴进行旋转?
  • css3 transform 3d 使用css3创建动态3d立方体(html5实践)_html5教程技巧
  • HTML5 transform三维立方体实现360无死角三维旋转效果_html5教程技巧

相关文章

  • 2018-12-03HTML5面向对象的游戏开发简单实例分享
  • 2018-12-03做导航栏为什么用ul>li,而不用dd dt dl?
  • 2018-12-03HTMl5的存储方式sessionStorage和localStorage详解_html5教程技巧
  • 2018-12-03关于HTML5 Canvas旋转动画的2个例子
  • 2018-12-03为什么优酷坚持使用flash,而不用html5?
  • 2017-08-06HTML5通过调用canvas对象的getContext()方法来获取绘图环境
  • 2018-12-03html5的button标签何时使用?为什么主流网站在非跳转按钮上仍然使用a标签?
  • 2018-12-03svg中的symbol如何制作icon
  • 2018-12-03HTML 5 应用的用户体验能达到本地应用那么好吗?
  • 2018-12-03HTML5/CSS3 网页加载进度条的实现,下载进度条等经典案例

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • h5改良的input元素种类
    • 利用h5实现获取用户地理定位
    • canvas游戏开发学习之三:绘制复杂形状
    • input file上传文件样式支持html5的浏览器解决方案_html5教程技巧
    • HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
    • 如何自定义video播放器样式?
    • Pace.js的原理是怎么样的?
    • html5实现数据存储实例代码
    • html5 如何做到application cache?离线储存技术的简要说明
    • iPhone 上 UC 浏览器和 QQ 浏览器哪个用户更多?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有