CSS如何对元素进行倾斜变形_使用transform: skew()

陆砚码
2026-10-03 • 👁 0人浏览过
skew()第一个参数控制水平倾斜角度，第二个控制垂直倾斜角度；单参数时默认垂直为0deg；文字模糊因GPU未启用和像素对齐破坏，可加translateZ(0)触发硬件加速；混用rotate()时执行顺序为从右到左。 skew() 的两个参数分别控制什么第一个参数是水平方向倾斜角度，第二个是垂直方向倾斜角度。只写一个参数时，默认第二个为 0deg，也就是只水平倾斜。
skew(30deg)
等价于
skew(30deg, 0deg)
；
skew(0deg, -15deg)
则只垂直倾斜向上（负值让元素顶部向左偏）。注意：角度单位必须写，
skew(30)
不生效。为什么 skew() 后文字变模糊或锯齿严重这是 GPU 加速未启用 + 像素对齐被破坏的典型表现。浏览器对斜切后的像素采样不友好，尤其在非整数缩放比或高 DPI 屏幕上更明显。解决方法有限但有效：给元素加
transform: translateZ(0)
或
will-change: transform
，强制触发硬件加速避免对
、
</code></div>
等表单控件直接 skew，它们内部渲染逻辑复杂，易出重绘异常
如果只是视觉倾斜需求，优先考虑用伪元素 +
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">skew()</code></div>
覆盖文字，保持原文本不受变形影响
skew() 和 rotate() 混用时顺序很重要
CSS transform 是从右到左执行的，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">transform: skewX(20deg) rotate(10deg)</code></div>
先旋转再水平倾斜；反过来写就先倾斜再旋转，结果完全不同。常见错误是以为“写在前面的先执行”。实际是「书写顺序 = 执行逆序」。调试时建议：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
单次只用一个 transform 函数，确认效果后再叠加
用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">transform: skewX(20deg) translateX(10px)</code></div>
这类组合时，注意 skew 会改变坐标系方向，后续 translate 的 X 不再是页面水平方向
需要稳定控制，改用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">matrix()</code></div>
更可靠，但可读性差，适合自动化生成
skewY() 在 Flex 或 Grid 容器中容易失效
当父容器是
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">display: flex</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">display: grid</code></div>
，且子元素设置了
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">align-items: center</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">justify-content</code></div>
类属性时，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">skewY()</code></div>
可能看起来没反应——其实是变形发生了，但基线和对齐逻辑让视觉位移被抵消。本质是：skew 不改变元素盒模型尺寸，但改变了绘制区域与布局坐标系的关系。
立即学习
“
前端免费学习笔记（深入）
”；
检查是否意外设置了
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">overflow: hidden</code></div>
，skew 后内容溢出会被裁剪
Flex 项目默认
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">align-self: stretch</code></div>
，skewY 后高度计算仍按原始矩形，可能导致上下留白异常
稳妥做法：在外层包一层
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><div></code></div>
，把 skew 放在外层，内容保持正常流，避免和布局模式冲突
事情说清了就结束。真正难的不是写对
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">skew()</code></div>
，而是判断它是不是当前场景最合适的方案——很多时候用 border 或渐变模拟倾斜线，比真 skew 一个块级元素更稳。
                            </div>

                            <!-- 文章导航 -->
                            <nav class="phpwebsoft-article-nav" aria-label="文章导航">

    
                                <a href="http://www.phpwebsoft.com/news/17057.html" class="phpwebsoft-article-nav-link phpwebsoft-article-nav-prev">
                                    <span>‹</span>
                                    <div>
                                        <div class="phpwebsoft-article-nav-label">上一篇</div>
                                        <div class="phpwebsoft-article-nav-title">响应式设计三部曲_html/css_WEB-ITnose</div>
                                    </div>
                                </a>
    


    
                                <a href="http://www.phpwebsoft.com/news/17070.html" class="phpwebsoft-article-nav-link phpwebsoft-article-nav-next">
                                    <div>
                                        <div class="phpwebsoft-article-nav-label">下一篇</div>
                                        <div class="phpwebsoft-article-nav-title">JavaScript中的Reflect对象有什么用？</div>
                                    </div>
                                    <span>›</span>
                                </a>
    

                            </nav>
                        </div>
                    </article>

                    <!-- 相关文章列表 -->
                    <section class="phpwebsoft-content-section" style="margin-top: 20px;">
                        <h2 class="phpwebsoft-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="phpwebsoft-article-list">

    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/17057.html" class="phpwebsoft-article-link">响应式设计三部曲_html/css_WEB-ITnose</a>
                                <div class="phpwebsoft-article-meta">2026-10-03</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/17050.html" class="phpwebsoft-article-link">使用 CSS 伪类</a>
                                <div class="phpwebsoft-article-meta">2026-10-03</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/17048.html" class="phpwebsoft-article-link">CSS如何实现CSS伪类链式组合_利用复杂选择器精确命中</a>
                                <div class="phpwebsoft-article-meta">2026-10-03</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/17046.html" class="phpwebsoft-article-link">如何利用事件委托解决动态生成的列表项无法绑定点击监听的难题</a>
                                <div class="phpwebsoft-article-meta">2026-10-03</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/17013.html" class="phpwebsoft-article-link">React props全面详细解析</a>
                                <div class="phpwebsoft-article-meta">2026-10-03</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/17070.html" class="phpwebsoft-article-link">JavaScript中的Reflect对象有什么用？</a>
                                <div class="phpwebsoft-article-meta">2026-10-03</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/17146.html" class="phpwebsoft-article-link">HTML5转APP支持离线使用吗_离线模式设置与限制汇总【汇总】</a>
                                <div class="phpwebsoft-article-meta">2026-10-03</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/17160.html" class="phpwebsoft-article-link">bootstrap 如何修改css样式</a>
                                <div class="phpwebsoft-article-meta">2026-10-03</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/17162.html" class="phpwebsoft-article-link">tornado总结4-html模板使用2_html/css_WEB-ITnose</a>
                                <div class="phpwebsoft-article-meta">2026-10-03</div>
                            </li>
    
                            <li class="phpwebsoft-article-item">
                                <a href="http://www.phpwebsoft.com/news/17176.html" class="phpwebsoft-article-link">JavaScript中configurable对属性删除与修改的控制</a>
                                <div class="phpwebsoft-article-meta">2026-10-03</div>
                            </li>
    

                        </ul>
                    </section>
                </div>

                <!-- 右侧边栏 -->
                <aside class="phpwebsoft-sidebar phpwebsoft-sidebar-right" aria-label="侧边栏">
    <!-- 推荐阅读 -->
    <div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">推荐阅读</h3>
        <div class="phpwebsoft-recommend-grid">

    
            <a href="http://www.phpwebsoft.com/news/20977.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="jimdo怎么插入html5进度指示器_jimdo进度指示器html5代码与样式【方法】">
                </div>
                <div class="phpwebsoft-recommend-title">jimdo怎么插入html5进度指示器_jimdo进度指示器html5代码与样式【方法】</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/20976.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="HTML图片轮播图添加指示器怎么做？">
                </div>
                <div class="phpwebsoft-recommend-title">HTML图片轮播图添加指示器怎么做？</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/20975.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="css如何让图标颜色跟随文字变化_利用currentColor继承颜色">
                </div>
                <div class="phpwebsoft-recommend-title">css如何让图标颜色跟随文字变化_利用currentColor继承颜色</div>
            </a>
    
            <a href="http://www.phpwebsoft.com/news/20970.html" class="phpwebsoft-recommend-item">
                <div class="phpwebsoft-recommend-thumb">
                    <img src="http://www.phpwebsoft.com/static/v10/images/article-6.jpg" alt="什么是 JavaScript 的装饰器在自动依赖注入框架中的应用？">
                </div>
                <div class="phpwebsoft-recommend-title">什么是 JavaScript 的装饰器在自动依赖注入框架中的应用？</div>
            </a>
    

        </div>
    </div>

    <!-- 最新文章 -->
    <div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">最新文章</h3>
        <ul class="phpwebsoft-article-list">

    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20977.html" class="phpwebsoft-article-link">jimdo怎么插入html5进度指示器_jimdo进度指示器html5代码与样式【方法】</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20976.html" class="phpwebsoft-article-link">HTML图片轮播图添加指示器怎么做？</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20975.html" class="phpwebsoft-article-link">css如何让图标颜色跟随文字变化_利用currentColor继承颜色</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20970.html" class="phpwebsoft-article-link">什么是 JavaScript 的装饰器在自动依赖注入框架中的应用？</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20966.html" class="phpwebsoft-article-link">使用 React 的 useState 修改数组中元素的状态</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>
    
            <li class="phpwebsoft-article-item">
                <a href="http://www.phpwebsoft.com/news/20958.html" class="phpwebsoft-article-link">阻止移动设备(手机、pad)浏览器双击放大网页的方法_html5教程技巧</a>
                <div class="phpwebsoft-article-meta">2026-10-09</div>
            </li>
    

        </ul>
    </div>

    <!-- 热门标签 -->
    <div class="phpwebsoft-widget">
        <h3 class="phpwebsoft-widget-title">热门标签</h3>
        <div class="phpwebsoft-article-tag-list">

    
            <a href="http://www.phpwebsoft.com/tag/1684" class="phpwebsoft-article-tag-item">css</a>
    

        </div>
    </div>
</aside>
            </div>
        </div>
    </main>


    <!-- 页脚 -->
    <footer class="phpwebsoft-footer">
        <div class="phpwebsoft-container">
            <div class="phpwebsoft-footer-links" style="justify-content: center;">
                
                
                <a href="http://www.phpwebsoft.com/22.html" class="phpwebsoft-footer-link">免责声明</a>
                
                <a href="http://www.phpwebsoft.com/23.html" class="phpwebsoft-footer-link">关于我们</a>
                
                <a href="http://www.phpwebsoft.com/24.html" class="phpwebsoft-footer-link">联系我们</a>
                
                <a href="http://www.phpwebsoft.com/25.html" class="phpwebsoft-footer-link">投诉删除</a>
                
                <a href="http://www.phpwebsoft.com/26.html" class="phpwebsoft-footer-link">投稿须知</a>
                
                
            </div>
            <div class="phpwebsoft-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 websoft网络软件专家
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025061481号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button class="phpwebsoft-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>

    <!-- 公共脚本 -->
    <script src="http://www.phpwebsoft.com/static/v10/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
</html>