迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

使用 JavaScript 旋转图像

作者:迹忆客 最近更新:2024/03/16 浏览次数:

旋转 HTML 元素是使用 CSS 执行的常见要求。CSS 提供了一个转换属性,你可以使用它来完成此任务。在本文中,我们将学习如何使用 JavaScript 旋转图像。


使用 CSS 转换使用 JavaScript 旋转图像

CSS 变换属性允许你旋转、缩放、倾斜或移动元素。改变 CSS 视觉格式模型的坐标空间。如果属性的值不是 none,则创建堆栈上下文。在这种情况下,元素充当容器块,其位置根据其包含的元素设置为 position: fixedposition: absolute

转换属性可以指定为 none 关键字或一个或多个 transform 函数。如果 perspective() 是几个函数值之一,它必须首先出现。

语法:

transform: none;
transform: translateX($Xpx) rotate($Ydeg) translateY($Zpx);

当要应用一个或多个 CSS 变换函数时,变换值是 transform-function。变换函数从左到右相乘。从右到左的复合,有效地应用了变换。在上面的语法中,我们使用 translateX,它水平翻译具有特定像素的元素,translateY,它垂直翻译具有特定像素的元素,以及 rotate,它围绕一个特定角度旋转元素二维平面上的固定点。

none 表示不应应用任何转换。有关详细信息,请参阅 transform 文档。

<input id="button" type="button" value="Rotate">
<div id="img_container">
    <img src="https://www.google.com/images/srpr/logo3w.png" id="image">
<div>
let angle = 0, img = document.getElementById('img_container');
document.getElementById('button').onclick = function() {
  angle = (angle + 90) % 360;
  img.className = 'rotate' + angle;
}
#img_container.rotate90 {
  width: 100px;
  height: 820px
}
#image {
  transform-origin: top left;
  -webkit-transform-origin: top left;
}
#img_container.rotate90 #image {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
}

在上面的代码中,我们创建了一个容器,每次用户点击旋转按钮时,我们将当前角度加 90 度,取 360 度的模数。一旦找到最终角度,我们就可以添加其属性已使用 CSS 声明的预定义类。

该示例仅显示 90 度旋转,但你可以将其定义为任何角度,例如 45 度或 105 度等。上面代码的输出如下所示:

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 JavaScript 中更改悬停图像

发布时间:2024/03/16 浏览次数:88 分类:JavaScript

在悬停时更改图像在 UI 上添加了一种很酷的氛围。此任务可以通过基本的 JavaScript 函数操作执行,也可以通过 jQuery 的 .hover() 函数执行。

使用 JavaScript 淡入图像

发布时间:2024/03/16 浏览次数:101 分类:JavaScript

可以借助某些方法和属性来淡入图像以制作具有视觉吸引力的 UI。requestAnimationFrame 方法和 className 属性是淡入图像的首选方式。

在 JavaScript 中使用 Onclick 重定向页面

发布时间:2024/03/16 浏览次数:78 分类:JavaScript

本教程将教你如何在用户单击 HTML 按钮时创建 JavaScript 重定向。我们将使用 onclick 函数来监听事件。如果用户单击该按钮,它将重定向到另一个页面。

JavaScript 布尔函数

发布时间:2023/09/09 浏览次数:104 分类:JavaScript

与大多数其他编程语言不同,JavaScript 拥有布尔类型作为原始数据类型。 布尔类型大多将 true 和 false 作为唯一的默认值。但在某些情况下,我们也将 0 表示为 false,将 1 表示为 true。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便