html代码
- css 超出文字省略
- js判断json为空
- JavaScript反转数组实用的4种方法
- JS检查数组中是否存在某个元素
- js反转数组
- img图片和a标签在同一行的css写法
- js正则校验是否字符串为纯中文
- js数组遍历、截取、删除、元素查询
- view、div水平横向排列
- js document 增加、删除、操作节点和子节点
- js判断JSON为空
- input数字类型去掉上下箭头
- css鼠标指针cursor
- js两个时间相减得出时分秒
- Math.random()随机数四舍五入
- 使用js去除字符串内所带有空格的三种方法
- var、let与const变量声明比较
- js字符串切割split
- append和appendChild比较
- js给button添加点击事件
- 原生AJAX、XMLHttpRequest发送post表单请求
- js给input框点击回车事件
- css伪类选择器
- document移除style一个样式属性
- html2canvas如何实现滤镜效果
- html2canvas提高图片质量清晰度
- transform translate实现位移
- transform旋转rotate
transform旋转rotate
时间：2024-01-01
transform除了可以对元素进行位移，还可以旋转元素，尤其是图片，可以使用rotate来进行元素以指定中心点进行旋转。
一、参数示例
|
rotate(56deg) |
相当于rotateX(56deg) |
|
rotate(-56deg) |
相当于rotateY(56deg) |
|
rotateX(56deg) |
X轴为基点，向右旋转56°，顺时针 |
|
rotateY(56deg |
Y轴为基点，向左旋转56°，逆时针 |
二、旋转中心点
使用transform-origin来设置旋转中心点，即绕着哪个点进行旋转
|
transform-origin |
center 元素中心，默认值 20px 20px 旋转中心点为x:20px y:20px left，top，right，bottom分别绕着四个边角点来旋转 |
三、综合使用
transform 的translate位移与rotate结合使用
|
.rotate{ transform: translateX(50px) rotate(45deg); } |
四、浏览器适配
使用的话，以防万一，加上浏览器适配，防止部分浏览器不生效
|
-webkit-transform: rotate(45deg); /*适配 Safari 和 Chrome*/ -moz-transform: rotate(45deg); /*适配 Firefox*/ -ms-transform: rotate(45deg); /*适配 IE9*/ -o-transform: rotate(45deg); /*适配 Opera*/ transform: rotate(45deg); |
