transform-origin 不适用于 safari

Question

为什么 transform-origin 在 Safari 中不起作用？

在这里，它应该是什么样子 (Chrome)：http://i.imgur.com/f3zBu8e.png 在这里，它在 Safari 中的外观：http://i.imgur.com/0XrPYXs.png

我已经尝试过一些带有百分比的内容，但我的内容 div 大小不同，所以看起来很尴尬。

这是 JSFiddle。 http://jsfiddle.net/2f4pferq/

text-align: right; -ms-transform: rotate(-90deg); -ms-transform-origin: right top; -webkit-transform: rotate(-90deg); -webkit-transform-origin: right top; transform: rotate(-90deg); transform-origin: right top;

代码如下：

.verticaltext {
    position: absolute;
    top: 10px;
    left: 25px;
    transform: translateX(-100%);
    text-transform: uppercase;
}

.verticaltext_content {
    text-align: right;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: right top;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: right top;
    transform: rotate(-90deg);
    transform-origin: right top;
}

.content {
    background-color: #000;
    color: #FFF;
    margin-bottom: 25px;
    padding: 25px;
    width: 100%;
    min-height: 200px;
}

.content p {
    margin: 0px 0px 0px 30px;
}

.content ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.content a,
.content a:link,
.content a:visited {
    color: #FFF;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.content a:hover {
    color: #FFA500;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.content i.fa {
    color: #FFF;
    width: 15%;
}

.content i.fa:hover {
    color: #FFA500;
}

<div class="content">
  <div class="verticaltext">
    <h2 class="verticaltext_content">Diskografie</h2>
  </div>
 
  
 <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

Answer 1

您的转换中 .verticaltext 的非供应商前缀

.verticaltext {
  position: absolute;
  top: 10px;
  left: 25px;
  transform: translateX(-100%);
  text-transform: uppercase;
}

应该是

.verticaltext {
  position: absolute;
  top: 10px;
  left: 25px;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  text-transform: uppercase;
}

transform-origin 不适用于 safari

transform-origin doesnt apply in safari

css

safari

transform