使用CSS,我如何应用一个以上的transform

示例:在下面的示例中,仅应用平移,而不应用旋转.

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}

推荐答案

你必须把它们放在一行,像这样:

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

如果有多个转换指令,则只应用最后一个.这和其他CSS规则一样.


请记住,多个转换单行指令是100.

此:transform: scale(1,1.5) rotate(90deg);
和:transform: rotate(90deg) scale(1,1.5);

not会产生同样的结果吗

.orderOne, .orderTwo {
  font-family: sans-serif;
  font-size: 22px;
  color: #000;
  display: inline-block;
}

.orderOne {
  transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
  transform: rotate(90deg) scale(1, 1.5);
}
<div class="orderOne">
  A
</div>

<div class="orderTwo">
  A
</div>

Css相关问答推荐

为什么标题中的特定 div 与 Odoo 13 中 PDF 中的页面重叠?

AngularJS Graphs & Charts - 实线和虚线的混合

基于内容显示(show)/隐藏(hide)同级div

我可以使用单个选择器定位所有 标记吗?

如何在渲染之前获取react 组件的大小(高度/宽度)?

仅针对 iOS 设备的 CSS 媒体查询

CSS 网格布局中的等高行

Bootstrap 4:下拉菜单在屏幕右侧消失

Bootstrap 4 响应式表格不会占用 100% 的宽度

如何将不透明度应用于 CSS colored颜色 变量?

angular 2 ngIf 和 CSS 过渡/动画

Angular 2:如何为组件的宿主元素设置样式?

脉动的心脏 CSS 动画

如何对齐单个 flexbox 项目(覆盖 justify-content)

将最后一个弹性项目放置在容器的末尾

如何通过 CSS 识别 Microsoft Edge 浏览器?

React.js 内联样式最佳实践

如果容器 div 较小,如何将子 div 扩展到 100% 屏幕宽度?

CSS 单位 - vh/vw 和 % 有什么区别?