transform三大属性rotate、scale、translate 、
transform:
作用: 动画效果
优点: 执行速度 很更快 (模拟使用 GPU渲染)
const [isbool, setIsbool] = useState(false)
<div styleName={cs('tranform', {tranform2: isbool})}>
tranform
</div>
<div styleName={cs('tranform-xy', {'tranform-xy2': isbool})}>
tranform
</div>
//初始样式
.tranform, .tranform-xy {
width: 100px;
height: 100px;
background: rgb(241, 241, 40);
transform: translateX(0);
}
//第一个图形
.tranform2 {
transform: translateX(500px);
}
//第二个图形
.tranform-xy {
background: #F99;
}
.tranform-xy2 {
// x, y 轴 都移动
transform: translate(100px, 50px);
}
rotate:
rotate(angle)定义2D旋转
rotateX(angle) x 轴 横向移动
rotateY(angle) y 轴 竖向移动
rotateZ(angle) 双向移动
rotate3d(angle)定义3d旋转
rotate3d(1, 0, 1, -180deg);顺时针旋转消失
const [r, setR] = useState(false)
<div styleName={cs('rotate', {'rotate2': r})}>
rotate
</div>
.rotate {
width: 100px;
height: 100px;
background: rgb(64, 193, 233);
}
.rotate2 {
rotate: 45deg;
}
scale:
CSS3 transform-origin属性设置元素旋转起始位置
scale(数值)定义倍数缩放,>1放大,<1缩小
scaleX()通过x轴定义,仅水平方向缩放
scaleY()通过y轴定义,仅垂直方向缩放
scaleZ()通过z轴定义,定义3d缩放
const [s, setS] = useState(false)
<div styleName={cs('scale', {'scale2': s})}>
scale
</div>
.scale {
width: 100px;
height: 100px;
background: rgb(77, 236, 90);
}
.scale2 {
// 缩小 宽 或者 高
transform: scale(1, 0.5);
// 宽高 都缩小
// transform: scale(0.5);
}
translate:
translateX(30px): x 轴 横向移动
translat0px): y 轴 竖向移动
translate(x, y): 双向移动
translate3d(x, y, z): 3个轴的方向移动 (伪GPU渲染) z 轴永远设置成 0
缩放:
给 2: 放大2倍
给 0.5: 缩小一倍
scale(比例)
scale(x, y)
旋转 rotate
rotate(角度): 例如 rotate(45deg)