css position fixed无法旋转rotate的解决方案

最新推荐文章于 2024-06-29 22:27:57 发布

iteye_13003

最新推荐文章于 2024-06-29 22:27:57 发布

阅读量585

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签：乔乐共享纵观千象每天进步一点点 rotate fixed

本文链接：https://blog.youkuaiyun.com/iteye_13003/article/details/82581655

CSS 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用CSS实现元素垂直居中并进行90度旋转的技巧，通过固定定位及变换原点的方式让元素能够在页面上精准显示。适用于前端开发中需要创意布局的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.left,
.right {
    position: fixed;
    top: 0;
    bottom: 0;
    height: 1.5em;
    margin: auto;
}

.left {
    left: 0;
    -webkit-transform-origin: 0 50%;
       -moz-transform-origin: 0 50%;
        -ms-transform-origin: 0 50%;
         -o-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transform: rotate(-90deg) translate(-50%, 50%);
       -moz-transform: rotate(-90deg) translate(-50%, 50%);
        -ms-transform: rotate(-90deg) translate(-50%, 50%);
         -o-transform: rotate(-90deg) translate(-50%, 50%);
            transform: rotate(-90deg) translate(-50%, 50%);
}

.right {
    right: 0;
    -webkit-transform-origin: 100% 50%;
       -moz-transform-origin: 100% 50%;
        -ms-transform-origin: 100% 50%;
         -o-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: rotate(90deg) translate(50%, 50%);
       -moz-transform: rotate(90deg) translate(50%, 50%);
        -ms-transform: rotate(90deg) translate(50%, 50%);
         -o-transform: rotate(90deg) translate(50%, 50%);
            transform: rotate(90deg) translate(50%, 50%);
}

在线预览：http://codepen.io/anon/pen/FtyEG