• Skip to main content
  • Skip to search
  • Skip to select language
MDN Web Docs
  • References
    • Overview / Web Technology

      Web technology reference for developers

    • HTML

      Structure of content on the web

    • CSS

      Code used to describe document style

    • JavaScript

      General-purpose scripting language

    • HTTP

      Protocol for transmitting web resources

    • Web APIs

      Interfaces for building web applications

    • Web Extensions

      Developing extensions for web browsers

    • Accessibility

      Build web projects usable for all

    • Web Technology

      Web technology reference for developers

  • Learn
    • Overview / MDN Learning Area

      Learn web development

    • MDN Learning Area

      Learn web development

    • HTML

      Learn to structure web content with HTML

    • CSS

      Learn to style content using CSS

    • JavaScript

      Learn to run scripts in the browser

    • Accessibility

      Learn to make the web accessible to all

  • Plus
    • Overview

      A customized MDN experience

    • AI Help

      Get real-time assistance and support

    • Updates

      All browser compatibility updates at a glance

    • Documentation

      Learn how to use MDN Plus

    • FAQ

      Frequently asked questions about MDN Plus

  • Curriculum New
  • Blog
    • Playground

      Write, test and share your code

    • HTTP Observatory

      Scan a website for free

    • AI Help

      Get real-time assistance and support

  • Log in
  • Sign up for free
  1. 面向开发者的 Web 技术
  2. CSS:层叠样式表
  3. CSS Transforms
    • English (US)
    • Deutsch
    • Español
    • Français
    • 日本語
    • Русский

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

在本文中

  • 引用参考
  • 使用指南
  • 规范
  1. CSS
  2. 初学者教程
  3. 你的第一个网站:样式化内容
  4. CSS 样式基础
    1. CSS 如何运行
    2. 让我们开始 CSS 的学习之旅
    3. 挑战:为传记页面添加样式
    4. CSS 选择器
    5. 属性选择器
    6. 伪类和伪元素
    7. 关系选择器
    8. 盒模型
    9. 层叠、优先级与继承
    10. 值和单位
    11. 在 CSS 中调整大小
    12. 背景与边框
    13. 溢出的内容
    14. 图像、媒体和表单元素
    15. 样式化表格
    16. 调试 CSS
    17. 挑战:基本的 CSS 理解
    18. 挑战:创建精美的信纸
    19. 挑战:一个漂亮的盒子
  5. CSS 文本样式
    1. 基本文本和字体样式
    2. 为列表添加样式
    3. 样式化链接
    4. Web 字体
    5. 挑战:排版社区大学首页
  6. CSS 布局概述
    1. 介绍 CSS 布局
    2. 浮动
    3. 定位
    4. 弹性盒子
    5. 网格
    6. 响应式设计
    7. 媒体查询入门指南
    8. 挑战:基本布局理解
  7. CSS 参考
  8. 模块
    1. CSS anchor positioning
    2. CSS 动画
    3. CSS 背景和边框
    4. CSS Basic User Interface
    5. CSS 盒子对齐
    6. CSS 基础框盒模型
    7. CSS box sizing
    8. CSS cascading and inheritance
    9. CSS 颜色调整
    10. CSS 颜色
    11. CSS compositing and blending
    12. CSS conditional rules
    13. CSS 局限
    14. CSS 计数器样式
    15. CSS custom properties for cascading variables
    16. CSS display
    17. CSS filter effects
    18. CSS 弹性盒子布局
    19. CSS font loading
    20. CSS 字体
    21. CSS 片段
    22. CSS 生成内容
    23. 网格布局
    24. CSS images
    25. CSS inline layout
    26. CSS lists and counters
    27. CSS 逻辑属性与逻辑值
    28. CSS Masking
    29. 媒体查询
    30. CSS motion path
    31. CSS 多列布局
    32. CSS namespaces
    33. CSS 嵌套
    34. CSS overflow
    35. CSS overscroll behavior
    36. CSS 分页媒体
    37. CSS 定位布局
    38. CSS properties and values API
    39. CSS pseudo-elements
    40. CSS ruby layout
    41. CSS scoping
    42. CSS scroll anchoring
    43. CSS 滚动吸附
    44. CSS scroll-driven animations
    45. CSS Scrollbars
    46. CSS 选择器
    47. CSS shadow parts
    48. CSS 形状
    49. CSS syntax
    50. CSS Table
    51. CSS Text
    52. CSS 文本装饰
    53. CSS Transforms
    54. CSS 过渡
    55. CSS 值和单位
    56. CSS 视图过渡
    57. CSS 书写模式
    58. CSS 对象模型视图
  9. 属性
    1. -moz-*
      1. -moz-float-edge 非标准 已弃用
      2. -moz-force-broken-image-icon 非标准 已弃用
      3. -moz-image-region 非标准
      4. -moz-orient 非标准
      5. -moz-user-focus 非标准 已弃用
      6. -moz-user-input 非标准 已弃用
    2. -webkit-*
      1. -webkit-border-before 非标准
      2. -webkit-box-reflect 非标准
      3. -webkit-mask-box-image 非标准
      4. -webkit-mask-composite 非标准
      5. -webkit-mask-position-x 非标准
      6. -webkit-mask-position-y 非标准
      7. -webkit-mask-repeat-x 非标准
      8. -webkit-mask-repeat-y 非标准
      9. -webkit-tap-highlight-color 非标准
      10. -webkit-text-fill-color
      11. -webkit-text-security 非标准
      12. -webkit-text-stroke
      13. -webkit-text-stroke-color
      14. -webkit-text-stroke-width
      15. -webkit-touch-callout 非标准
    3. 自定义属性(--*):CSS 变量
    4. accent-color
    5. align-*
      1. align-content
      2. align-items
      3. align-self
    6. alignment-baseline
    7. all
    8. anchor-name 实验性
    9. animation-*
      1. animation
      2. animation-composition
      3. animation-delay
      4. animation-direction
      5. animation-duration
      6. animation-fill-mode
      7. animation-iteration-count
      8. animation-name
      9. animation-play-state
      10. animation-range 实验性
      11. animation-range-end 实验性
      12. animation-range-start 实验性
      13. animation-timeline 实验性
      14. animation-timing-function
    10. appearance
    11. aspect-ratio
    12. backdrop-filter
    13. backface-visibility
    14. background-*
      1. background
      2. background-attachment
      3. background-blend-mode
      4. background-clip
      5. background-color
      6. background-image
      7. background-origin
      8. background-position
      9. background-position-x
      10. background-position-y
      11. background-repeat
      12. background-size
    15. block-size
    16. border-*
      1. border
      2. border-block
      3. border-block-color
      4. border-block-end
      5. border-block-end-color
      6. border-block-end-style
      7. border-block-end-width
      8. border-block-start
      9. border-block-start-color
      10. border-block-start-style
      11. border-block-start-width
      12. border-block-style
      13. border-block-width
      14. border-bottom
      15. border-bottom-color
      16. border-bottom-left-radius
      17. border-bottom-right-radius
      18. border-bottom-style
      19. border-bottom-width
      20. border-collapse
      21. border-color
      22. border-end-end-radius
      23. border-end-start-radius
      24. border-image
      25. border-image-outset
      26. border-image-repeat
      27. border-image-slice
      28. border-image-source
      29. border-image-width
      30. border-inline
      31. border-inline-color
      32. border-inline-end
      33. border-inline-end-color
      34. border-inline-end-style
      35. border-inline-end-width
      36. border-inline-start
      37. border-inline-start-color
      38. border-inline-start-style
      39. border-inline-start-width
      40. border-inline-style
      41. border-inline-width
      42. border-left
      43. border-left-color
      44. border-left-style
      45. border-left-width
      46. border-radius
      47. border-right
      48. border-right-color
      49. border-right-style
      50. border-right-width
      51. border-spacing
      52. border-start-end-radius
      53. border-start-start-radius
      54. border-style
      55. border-top
      56. border-top-color
      57. border-top-left-radius
      58. border-top-right-radius
      59. border-top-style
      60. border-top-width
      61. border-width
    17. bottom
    18. box-*
      1. box-align 非标准 已弃用
      2. box-decoration-break
      3. box-direction 非标准 已弃用
      4. box-flex 非标准 已弃用
      5. box-flex-group 非标准 已弃用
      6. box-lines 非标准 已弃用
      7. box-ordinal-group 非标准 已弃用
      8. box-orient 非标准 已弃用
      9. box-pack 非标准 已弃用
      10. box-shadow
      11. box-sizing
    19. break-*
      1. break-after
      2. break-before
      3. break-inside
    20. caption-side
    21. caret-color
    22. clear
    23. clip-*
      1. clip 已弃用
      2. clip-path
      3. clip-rule
    24. color-*
      1. color
      2. color-interpolation
      3. color-interpolation-filters
      4. color-scheme
    25. column-*
      1. column-count
      2. column-fill
      3. column-gap
      4. column-rule
      5. column-rule-color
      6. column-rule-style
      7. column-rule-width
      8. column-span
      9. column-width
    26. columns
    27. contain-*
      1. contain
      2. contain-intrinsic-block-size
      3. contain-intrinsic-height
      4. contain-intrinsic-inline-size
      5. contain-intrinsic-size
      6. contain-intrinsic-width
    28. container-*
      1. container
      2. container-name
      3. container-type
    29. content
    30. content-visibility
    31. counter-*
      1. counter-increment
      2. counter-reset
      3. counter-set
    32. cursor
    33. cx
    34. cy
    35. d
    36. direction
    37. display
    38. dominant-baseline
    39. empty-cells
    40. field-sizing 实验性
    41. fill-*
      1. fill
      2. fill-opacity
      3. fill-rule
    42. filter
    43. flex-*
      1. flex
      2. flex-basis
      3. flex-direction
      4. flex-flow
      5. flex-grow
      6. flex-shrink
      7. flex-wrap
    44. float
    45. flood-color
    46. flood-opacity
    47. font-*
      1. font
      2. font-family
      3. font-feature-settings
      4. font-kerning
      5. font-language-override
      6. font-optical-sizing
      7. font-palette
      8. font-size
      9. font-size-adjust
      10. font-smooth 非标准
      11. font-stretch 已弃用
      12. font-style
      13. font-synthesis
      14. font-synthesis-position 实验性
      15. font-synthesis-small-caps
      16. font-synthesis-style
      17. font-synthesis-weight
      18. font-variant
      19. font-variant-alternates
      20. font-variant-caps
      21. font-variant-east-asian
      22. font-variant-emoji
      23. font-variant-ligatures
      24. font-variant-numeric
      25. font-variant-position
      26. font-variation-settings
      27. font-weight
    48. forced-color-adjust
    49. gap
    50. grid-*
      1. grid
      2. grid-area
      3. grid-auto-columns
      4. grid-auto-flow
      5. grid-auto-rows
      6. grid-column
      7. grid-column-end
      8. grid-column-start
      9. grid-row
      10. grid-row-end
      11. grid-row-start
      12. grid-template
      13. grid-template-areas
      14. grid-template-columns
      15. grid-template-rows
    51. hanging-punctuation
    52. height
    53. hyphenate-character
    54. hyphenate-limit-chars
    55. hyphens
    56. image-*
      1. image-orientation
      2. image-rendering
      3. image-resolution 实验性
    57. initial-letter
    58. inline-size
    59. inset-*
      1. inset
      2. inset-block
      3. inset-block-end
      4. inset-block-start
      5. inset-inline
      6. inset-inline-end
      7. inset-inline-start
    60. interpolate-size 实验性
    61. isolation
    62. justify-*
      1. justify-content
      2. justify-items
      3. justify-self
    63. left
    64. letter-spacing
    65. lighting-color
    66. line-*
      1. line-break
      2. line-clamp
      3. line-height
      4. line-height-step 实验性
    67. list-*
      1. list-style
      2. list-style-image
      3. list-style-position
      4. list-style-type
    68. margin-*
      1. margin
      2. margin-block
      3. margin-block-end
      4. margin-block-start
      5. margin-bottom
      6. margin-inline
      7. margin-inline-end
      8. margin-inline-start
      9. margin-left
      10. margin-right
      11. margin-top
      12. margin-trim 实验性
    69. marker-*
      1. marker
      2. marker-end
      3. marker-mid
      4. marker-start
    70. mask-*
      1. mask
      2. mask-border
      3. mask-border-mode
      4. mask-border-outset
      5. mask-border-repeat
      6. mask-border-slice
      7. mask-border-source
      8. mask-border-width
      9. mask-clip
      10. mask-composite
      11. mask-image
      12. mask-mode
      13. mask-origin
      14. mask-position
      15. mask-repeat
      16. mask-size
      17. mask-type
    71. math-*
      1. math-depth
      2. math-shift 实验性
      3. math-style
    72. max-*
      1. max-block-size
      2. max-height
      3. max-inline-size
      4. max-width
    73. min-*
      1. min-block-size
      2. min-height
      3. min-inline-size
      4. min-width
    74. mix-blend-mode
    75. object-fit
    76. object-position
    77. offset-*
      1. offset
      2. offset-anchor
      3. offset-distance
      4. offset-path
      5. offset-position
      6. offset-rotate
    78. opacity
    79. order
    80. orphans
    81. outline-*
      1. outline
      2. outline-color
      3. outline-offset
      4. outline-style
      5. outline-width
    82. overflow-*
      1. overflow
      2. overflow-anchor
      3. overflow-block
      4. overflow-clip-margin
      5. overflow-inline
      6. overflow-wrap
      7. overflow-x
      8. overflow-y
    83. overlay 实验性
    84. overscroll-*
      1. overscroll-behavior
      2. overscroll-behavior-block
      3. overscroll-behavior-inline
      4. overscroll-behavior-x
      5. overscroll-behavior-y
    85. padding-*
      1. padding
      2. padding-block
      3. padding-block-end
      4. padding-block-start
      5. padding-bottom
      6. padding-inline
      7. padding-inline-end
      8. padding-inline-start
      9. padding-left
      10. padding-right
      11. padding-top
    86. page-*
      1. page
      2. page-break-after 已弃用
      3. page-break-before 已弃用
      4. page-break-inside 已弃用
    87. paint-order
    88. perspective
    89. perspective-origin
    90. place-*
      1. place-content
      2. place-items
      3. place-self
    91. pointer-events
    92. position-*
      1. position
      2. position-anchor 实验性
      3. position-area 实验性
      4. position-try 实验性
      5. position-try-fallbacks 实验性
      6. position-try-order 实验性
      7. position-visibility 实验性
    93. print-color-adjust
    94. quotes
    95. r
    96. resize
    97. right
    98. rotate
    99. row-gap
    100. ruby-align
    101. ruby-position
    102. rx
    103. ry
    104. scale
    105. scroll-*
      1. scroll-behavior
      2. scroll-margin
      3. scroll-margin-block
      4. scroll-margin-block-end
      5. scroll-margin-block-start
      6. scroll-margin-bottom
      7. scroll-margin-inline
      8. scroll-margin-inline-end
      9. scroll-margin-inline-start
      10. scroll-margin-left
      11. scroll-margin-right
      12. scroll-margin-top
      13. scroll-marker-group 实验性
      14. scroll-padding
      15. scroll-padding-block
      16. scroll-padding-block-end
      17. scroll-padding-block-start
      18. scroll-padding-bottom
      19. scroll-padding-inline
      20. scroll-padding-inline-end
      21. scroll-padding-inline-start
      22. scroll-padding-left
      23. scroll-padding-right
      24. scroll-padding-top
      25. scroll-snap-align
      26. scroll-snap-stop
      27. scroll-snap-type
      28. scroll-timeline 实验性
      29. scroll-timeline-axis 实验性
      30. scroll-timeline-name 实验性
    106. scrollbar-*
      1. scrollbar-color
      2. scrollbar-gutter
      3. scrollbar-width
    107. shape-*
      1. shape-image-threshold
      2. shape-margin
      3. shape-outside
      4. shape-rendering
    108. speak-as 实验性
    109. stop-color
    110. stop-opacity
    111. stroke-*
      1. stroke
      2. stroke-dasharray
      3. stroke-dashoffset
      4. stroke-linecap
      5. stroke-linejoin
      6. stroke-miterlimit
      7. stroke-opacity
      8. stroke-width
    112. tab-size
    113. table-layout
    114. text-*
      1. text-align
      2. text-align-last
      3. text-anchor
      4. text-box
      5. text-box-edge
      6. text-box-trim
      7. text-combine-upright
      8. text-decoration
      9. text-decoration-color
      10. text-decoration-line
      11. text-decoration-skip 实验性
      12. text-decoration-skip-ink
      13. text-decoration-style
      14. 文本装饰线厚度 (粗细)
      15. text-emphasis
      16. text-emphasis-color
      17. text-emphasis-position
      18. text-emphasis-style
      19. text-indent
      20. text-justify
      21. text-orientation
      22. text-overflow
      23. 文本渲染
      24. text-shadow
      25. text-size-adjust 实验性
      26. text-spacing-trim 实验性
      27. text-transform
      28. text-underline-offset
      29. text-underline-position
      30. text-wrap
      31. text-wrap-mode
      32. text-wrap-style
    115. timeline-scope 实验性
    116. top
    117. touch-action
    118. transform-*
      1. transform
      2. transform-box
      3. transform-origin
      4. transform-style
    119. transition-*
      1. transition
      2. transition-behavior
      3. transition-delay
      4. transition-duration
      5. transition-property
      6. transition-timing-function
    120. translate
    121. unicode-bidi
    122. user-modify 非标准 已弃用
    123. user-select
    124. vector-effect
    125. vertical-align
    126. view-*
      1. view-timeline 实验性
      2. view-timeline-axis 实验性
      3. view-timeline-inset 实验性
      4. view-timeline-name 实验性
      5. view-transition-name
    127. visibility
    128. white-space
    129. white-space-collapse
    130. widows
    131. width
    132. will-change
    133. word-break
    134. word-spacing
    135. writing-mode
    136. x
    137. y
    138. z-index
    139. zoom
  10. 选择器
    1. & 嵌套选择器
    2. 属性选择器
    3. 类选择器
    4. ID 选择器
    5. 类型选择器
    6. 通配选择器
  11. 关系选择器
    1. 子组合器
    2. 列组合器 实验性
    3. 后代选择器
    4. Namespace separator
    5. 接续兄弟组合器
    6. 选择器列表
    7. 后续兄弟选择器
  12. 伪类
    1. :-moz-*
      1. :-moz-broken 非标准 已弃用
      2. :-moz-drag-over 非标准
      3. :-moz-first-node 实验性 非标准
      4. :-moz-handler-blocked 非标准
      5. :-moz-handler-crashed 非标准
      6. :-moz-handler-disabled 非标准
      7. :-moz-last-node 实验性 非标准
      8. :-moz-loading 非标准
      9. :-moz-locale-dir(ltr) 非标准
      10. :-moz-locale-dir(rtl) 非标准
      11. :blank 非标准
      12. :-moz-submit-invalid 非标准
      13. :-moz-suppressed 非标准
      14. :-moz-user-disabled 非标准
      15. :-moz-window-inactive 非标准
    2. :active
    3. :any-link
    4. :autofill
    5. :blank 实验性
    6. :buffering
    7. :checked
    8. :current 实验性
    9. :default
    10. :defined
    11. :dir()
    12. :disabled
    13. :empty
    14. :enabled
    15. :first-*
      1. :first
      2. :first-child
      3. :first-of-type
    16. :focus-*
      1. :focus
      2. :focus-visible
      3. :focus-within
    17. :fullscreen
    18. :future
    19. :has-slotted
    20. :has()
    21. :host
    22. :host-context()
    23. :host()
    24. :hover
    25. :in-range
    26. :indeterminate
    27. :invalid
    28. :is()
    29. :lang()
    30. :last-child
    31. :last-of-type
    32. :left
    33. :link
    34. :local-link 实验性
    35. :modal
    36. :muted
    37. :not()
    38. :nth-*
      1. :nth-child()
      2. :nth-last-child
      3. :nth-last-of-type
      4. :nth-of-type
    39. :only-child
    40. :only-of-type
    41. :open
    42. :optional
    43. :out-of-range
    44. :past
    45. :paused
    46. :picture-in-picture
    47. :placeholder-shown
    48. :playing
    49. :popover-open
    50. :read-only
    51. :read-write
    52. :required
    53. :right
    54. :root
    55. :scope
    56. :seeking
    57. :stalled
    58. :state()
    59. :target-*
      1. :target
      2. :target-current 实验性
      3. :target-within 实验性
    60. :user-invalid
    61. :user-valid
    62. :valid
    63. :visited
    64. :volume-locked
    65. :where()
  13. 伪元素
    1. ::-moz-*
      1. ::-moz-color-swatch 非标准
      2. ::-moz-focus-inner 实验性 非标准
      3. ::-moz-list-bullet 实验性 非标准
      4. ::-moz-list-number 实验性 非标准
      5. ::-moz-meter-bar 非标准
      6. ::-moz-progress-bar 实验性 非标准
      7. ::-moz-range-progress 非标准
      8. ::-moz-range-thumb 非标准
      9. ::-moz-range-track 非标准
    2. ::-webkit-*
      1. ::-webkit-inner-spin-button 非标准
      2. ::-webkit-meter-bar 非标准 已弃用
      3. ::-webkit-meter-even-less-good-value 非标准
      4. ::-webkit-meter-inner-element 非标准
      5. ::-webkit-meter-optimum-value 非标准
      6. ::-webkit-meter-suboptimum-value 非标准
      7. ::-webkit-progress-bar 非标准
      8. ::-webkit-progress-inner-element 非标准
      9. ::-webkit-progress-value 非标准
      10. ::-webkit-scrollbar 非标准
      11. ::-webkit-search-cancel-button 非标准
      12. ::-webkit-search-results-button 非标准
      13. ::-webkit-slider-runnable-track 非标准
      14. ::-webkit-slider-thumb 非标准
    3. ::after
    4. ::backdrop
    5. ::before
    6. ::checkmark 实验性
    7. ::column 实验性
    8. ::cue (:cue)
    9. ::details-content
    10. ::file-selector-button
    11. ::first-letter
    12. ::first-line (:first-line)
    13. ::grammar-error
    14. ::highlight()
    15. ::marker
    16. ::part()
    17. ::picker-icon 实验性
    18. ::picker() 实验性
    19. ::placeholder
    20. ::scroll-*
      1. ::scroll-button() 实验性
      2. ::scroll-marker 实验性
      3. ::scroll-marker-group 实验性
    21. ::selection
    22. ::slotted()
    23. ::spelling-error
    24. ::target-text
    25. ::view-*
      1. ::view-transition
      2. ::view-transition-group
      3. ::view-transition-image-pair
      4. ::view-transition-new
      5. ::view-transition-old
  14. At 规则
    1. @charset
    2. @color-profile
    3. @container
    4. @counter-style
    5. @document 非标准 已弃用
    6. @font-face
    7. @font-feature-values
    8. @font-palette-values
    9. @import
    10. @keyframes
    11. @layer
    12. @media
    13. @namespace
    14. @page
    15. @position-try 实验性
    16. @property
    17. @scope
    18. @starting-style
    19. @supports
    20. @view-transition
  15. 函数
    1. -moz-image-rect 非标准 已弃用
    2. abs()
    3. acos()
    4. anchor-size() 实验性
    5. anchor() 实验性
    6. asin()
    7. atan()
    8. atan2()
    9. attr
    10. blur()
    11. brightness()
    12. calc-size() 实验性
    13. calc()
    14. circle()
    15. clamp()
    16. color-mix()
    17. color()
    18. conic-gradient()
    19. contrast()
    20. cos()
    21. counter()
    22. counters()
    23. cross-fade()
    24. cubic-bezier()
    25. device-cmyk()
    26. drop-shadow()
    27. element 实验性
    28. ellipse()
    29. env()
    30. exp()
    31. fit-content()
    32. grayscale()
    33. hsl()
    34. hue-rotate()
    35. hwb()
    36. hypot()
    37. image-set()
    38. image()
    39. inset()
    40. invert()
    41. lab()
    42. layer()
    43. lch()
    44. light-dark()
    45. linear-gradient()
    46. linear()
    47. log()
    48. matrix()
    49. matrix3d()
    50. max()
    51. min()
    52. minmax()
    53. mod()
    54. oklab()
    55. oklch()
    56. opacity()
    57. paint()
    58. palette-mix() 实验性
    59. path()
    60. perspective()
    61. polygon()
    62. pow()
    63. radial-gradient()
    64. ray()
    65. rect()
    66. rem()
    67. repeat()
    68. repeating-conic-gradient()
    69. repeating-linear-gradient()
    70. repeating-radial-gradient()
    71. rgb()
    72. rotate()
    73. rotate3d()
    74. rotateX()
    75. rotateY()
    76. rotateZ()
    77. round()
    78. saturate()
    79. scale()
    80. scale3d()
    81. scaleX()
    82. scaleY()
    83. scaleZ()
    84. scroll() 实验性
    85. sepia()
    86. shape()
    87. sign()
    88. sin()
    89. skew()
    90. skewX()
    91. skewY()
    92. sqrt()
    93. steps()
    94. symbols()
    95. tan()
    96. translate()
    97. translate3d()
    98. translateX()
    99. translateY()
    100. translateZ()
    101. url()
    102. var()
    103. view() 实验性
    104. xywh()
  16. 类型
    1. <absolute-size>
    2. <alpha-value>
    3. <angle-percentage>
    4. <angle>
    5. <baseline-position>
    6. <basic-shape>
    7. <blend-mode>
    8. <box-edge>
    9. <calc-keyword>
    10. <calc-sum>
    11. <color-interpolation-method>
    12. <color>
    13. <content-distribution>
    14. <content-position>
    15. <custom-ident>
    16. <dashed-ident>
    17. dimension
    18. <display-box>
    19. <display-inside>
    20. <display-internal>
    21. <display-legacy>
    22. <display-listitem>
    23. <display-outside>
    24. <easing-function>
    25. <filter-function>
    26. <flex>
    27. <frequency-percentage>
    28. <frequency>
    29. <generic-family>
    30. <gradient>
    31. <hex-color>
    32. <hue-interpolation-method>
    33. <hue>
    34. <ident>
    35. <image>
    36. <integer>
    37. <length-percentage>
    38. <length>
    39. <line-style>
    40. <named-color>
    41. <number>
    42. <overflow-position>
    43. <overflow>
    44. <percentage>
    45. <position-area> 实验性
    46. <position>
    47. <ratio>
    48. <relative-size>
    49. <resolution>
    50. <self-position>
    51. <shape> 已弃用
    52. <string>
    53. <system-color>
    54. <text-edge>
    55. <time-percentage>
    56. <time>
    57. transform-function
    58. <url>
  17. 指南
  18. 动画
    1. 使用 CSS 动画
  19. 背景和边框
    1. 多个背景的应用
    2. 调整背景图片的大小
  20. 盒对齐
    1. 块布局中的盒对齐方式
    2. 弹性盒布局中的盒对齐方式
    3. Box alignment in grid layout
    4. Box alignment in multi-column layout
  21. 盒模型
    1. CSS 基础框盒模型介绍
    2. 掌握外边距折叠
  22. 颜色
    1. 为 HTML 元素应用颜色
    2. Color values
    3. Using relative colors
    4. Using color wisely
    5. 无障碍:理解颜色和亮度
    6. Web 无障碍:色彩对比度
  23. 多列
    1. Basic Concepts of Multicol
    2. 多列布局的样式
    3. Spanning and balancing columns
    4. 处理 Multicol 中的溢出
    5. Handling content breaks in multi-column layout
  24. 条件规则
    1. 使用特性查询
  25. CSS 局限
    1. 使用 CSS 局限
    2. CSS 容器查询
    3. Using container size and style queries
  26. CSS 对象模型视图
    1. 坐标系
  27. 流式布局
    1. 常规流中的块和内联布局
    2. 应用或脱离流式布局
    3. 格式化上下文简介
    4. 流式布局和书写模式
    5. 流式布局和溢出
    6. Using the multi-keyword syntax with CSS display
  28. 弹性盒布局
    1. flex 布局的基本概念
    2. 弹性盒子与其他布局方法的联系
    3. 对齐弹性容器中的项目
    4. Flex 项排序
    5. 控制弹性元素在主轴上的比例
    6. 掌握弹性物件的包装
    7. 弹性盒子的典型用例
  29. 字体
    1. OpenType 字体特性指南
    2. Variable fonts guide
  30. 网格布局
    1. 网格布局的基本概念
    2. 网格布局和其他布局方法的联系
    3. CSS 网格中基于线的定位
    4. 网格模板区域
    5. 使用命名线布局
    6. CSS 网格布局中的自动定位
    7. 网格布局中的盒模型对齐
    8. CSS 网格,逻辑值和书写模式
    9. CSS 网格布局和无障碍
    10. 利用 CSS 网格布局实现常用布局
    11. Subgrid
    12. Masonry layout 实验性
  31. 图片
    1. 使用 CSS 渐变
  32. 列表和计数器
    1. 使用 CSS 计数器
    2. 使列表缩进一致
  33. 逻辑属性
    1. 逻辑属性与逻辑值的基本概念
    2. 用于浮动和定位的逻辑属性
    3. 用于外边距、边框和内边距的逻辑属性
    4. 逻辑尺寸属性
  34. 数学函数
    1. Using CSS math functions
  35. 媒体查询
    1. 使用媒体查询
    2. Using media queries for accessibility
    3. 使用编程方法测试媒体查询
    4. 打印
  36. 嵌套样式规则
    1. 使用 CSS 嵌套
    2. CSS at 规则嵌套
    3. CSS 嵌套与优先级
  37. 定位
    1. 理解 CSS 的 z-index 属性
  38. 滚动吸附
    1. 滚动吸附的基本概念
  39. 形状
    1. CSS 的图形(Shape)概览
    2. 使用 box 值指定形状
    3. Basic shapes with shape-outside
    4. Shapes from images
  40. 文本
    1. Wrapping and breaking text
  41. 变换
    1. 使用 CSS 变换
  42. 过渡
    1. 使用 CSS 过渡
  43. CSS 布局手册
    1. 指南:媒体对象
    2. 列布局
    3. 居中一个元素
    4. 粘性页脚
    5. 分离式导航菜单
    6. 面包屑导航
    7. List group with badges
    8. Pagination
    9. 卡片
    10. Grid wrapper
  44. 工具
    1. 色彩选择工具
    2. Box-shadow 生成器
    3. Border-image 生成器
    4. 圆角边框生成器

在本文中

  • 引用参考
  • 使用指南
  • 规范

CSS Transforms

CSS Transforms 是一个 CSS 模块,它定义了如何在二维或三维空间中转换元素的 CSS 样式。

引用参考

CSS 属性

  • backface-visibility
  • perspective
  • perspective-origin
  • transform
  • transform-box
  • transform-origin
  • transform-style

使用指南

CSS transforms 使用

循序渐进的教程,教你如何使用 CSS 对进行元素变形处理。

规范

Specification
CSS Transforms Module Level 1
CSS Transforms Module Level 2

Help improve MDN

Learn how to contribute.

This page was last modified on 2023年5月26日 by MDN contributors.

View this page on GitHub • Report a problem with this content
MDN logo

Your blueprint for a better internet.

  • MDN on Bluesky
  • MDN on Mastodon
  • MDN on X (formerly Twitter)
  • MDN on GitHub
  • MDN Blog RSS Feed

MDN

  • About
  • Blog
  • Careers
  • Advertise with us

Support

  • Product help
  • Report an issue

Our communities

  • MDN Community
  • MDN Forum
  • MDN Chat

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under a Creative Commons license.