transform-origin 不适用于 safari答案

【问题标题】：transform-origin doesnt apply in safaritransform-origin 不适用于 safari
【发布时间】：2015-06-07 00:35:17
【问题描述】：

为什么 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>

【问题讨论】：

请不要粘贴您的代码，而是制作一个 jsfiddle。
jsfiddle.net/2f4pferq@Ace

标签： css safari transform

【解决方案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;
}

【讨论】：