前端css动画transform多个属性值写法
X轴平移400px transform: translateX(400px);
X轴平移400px并缩小0.5倍 transform: translateX(400px) scale(0.5);
X轴平移400px并旋转45度 transform: translateX(400px) rotate(45deg);
直接空格直接加属性即可
建议写的时候先平移
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 600px;height: 600px;border: 2px solid gray;}.box1 div{width: 100px;height: 100px;border: 2px solid gray;background: red;}.box1 div:nth-child(1){transform: translateX(400px);/* X轴平移400px */}.box1 div:nth-child(2){transform: translateX(400px) scale(0.5);/* X轴平移400px并缩小0.5倍 */}.box1 div:nth-child(3){transform: translateX(400px) rotate(45deg);/* X轴平移400px并旋转45度 */}</style>
</head>
<body><div class="box1"><div> X轴平移400px</div><div>X轴平移400px并缩小0.5倍</div><div>X轴平移400px并旋转45度</div></div>
</body>
</html>