css transform实现图片旋转
2024-08-26
65
可以使用 CSS 的 transform 属性来实现图片旋转。transform 属性可以指定图片的旋转角度、缩放比例、平移距离等。
要旋转图片,需要使用 transform: rotate(角度); 语法。其中,角度为旋转的角度,可以为正值或负值。正值表示顺时针旋转,负值表示逆时针旋转。
例如,以下 CSS 代码将图片旋转 90 度:
img {
transform: rotate(90deg);
}
如果要指定旋转中心,可以使用 transform-origin 属性。transform-origin 属性可以指定旋转中心的位置,可以为 left top、left center、left bottom、center top、center center、center bottom、right top、right center、right bottom 等。
例如,以下 CSS 代码将图片绕着图片的中心旋转 90 度:
img {
transform: rotate(90deg);
transform-origin: center center;
}
以下是一些使用 CSS 实现图片旋转的示例:
/* 将图片旋转 90 度 */
img {
transform: rotate(90deg);
}
/* 将图片绕着图片的中心旋转 90 度 */
img {
transform: rotate(90deg);
transform-origin: center center;
}
/* 将图片旋转 180 度 */
img {
transform: rotate(180deg);
}
/* 将图片旋转 270 度 */
img {
transform: rotate(270deg);
}
/* 将图片旋转 360 度 */
img {
transform: rotate(360deg);
}
更新于:2个月前
赞一波!3
相关文章
- 【说站】css设置文字居中的两种方法
- 【说站】css旋转属性如何理解
- 前端CSS常见的三种设计模式
- 使用 HTML、CSS 和 JavaScript 的实时计算器
- CSS 中的变量
- CSS overflow 内容溢出时的显示方式
- CSS font-family 属性设置字体
- CSS 控制内容显示行数
- 玩转 CSS Flexbox 弹性布局
- CSS实现文字环绕图片和文字两端对齐
- CSS 边框属性总结
- position:sticky纯css实现粘性定位让元素滚到顶部固定
- css linear-gradient实现背景渐变色
- css页面内容不够高footer始终位于页面底部
- HTML-CSS-JS Prettify 代码格式化插件
- 网页内容很少时让footer处于最下方
- css改变progress进度条颜色
- css -webkit-line-clamp有什么用?
- css实现超过两行变省略号
- css修改鼠标的颜色样式
文章评论
评论问答