变换起源不适用于野生动物园

Question

为什么变换原点并不适用于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;

以下是代码：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的转化<{1}}上没有供应商前缀

.verticaltext

应该是

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