转换原点不适用于 safari [英] transform-origin doesnt apply in safari

问题描述

为什么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:旋转(-90度)；-ms-transform-origin:右上角；-webkit-transform:旋转(-90度)；-webkit-transform-origin:右上角；变换:旋转(-90度)；变换原点:右上角；

代码如下:

.verticaltext {位置:绝对；顶部:10px；左:25px；变换:translateX(-100%);文本转换:大写；}.verticaltext_content {文本对齐:右；-ms-transform:旋转(-90度)；-ms-transform-origin:右上角；-webkit-transform:旋转(-90度)；-webkit-transform-origin:右上角；变换:旋转(-90度)；变换原点:右上；}.内容 {背景色:#000；颜色:#FFF；底边距:25px；填充:25px；宽度:100%；最小高度:200px；}.内容p{边距:0px 0px 0px 30px；}.content ul {列表样式类型:无；边距:0；填充:0；}.内容a，.content a:link,.content a:访问过{颜色:#FFF；-webkit-transition:所有 0.2 秒的缓入缓出；-moz-transition:所有 0.2 秒的缓入缓出；-o-transition:所有 0.2 秒的缓入缓出；过渡:所有 0.2 秒的缓入缓出；}.content a:悬停{颜色:#FFA500；-webkit-transition:所有 0.2 秒的缓入缓出；-moz-transition:所有 0.2 秒的缓入缓出；-o-transition:所有 0.2 秒的缓入缓出；过渡:所有 0.2 秒的缓入缓出；文字装饰:无；}.content i.fa {颜色:#FFF；宽度:15%；}.content i.fa:悬停{颜色:#FFA500；}

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

解决方案

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

.verticaltext {位置:绝对；顶部:10px；左:25px；变换:translateX(-100%);文本转换:大写；}

应该是

.verticaltext {位置:绝对；顶部:10px；左:25px；-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);变换:translateX(-100%);文本转换:大写；}

Why doesn't transform-origin doesn't work in Safari?

Here, how it should look (Chrome): http://i.imgur.com/f3zBu8e.png Here, how it looks in Safari: http://i.imgur.com/0XrPYXs.png

I already tried some stuff with percents but it my content divs are having different sizes, so it looks awkward.

Here's the 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;

Here's the code:

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

解决方案

Your not vendor prefixing for the .verticaltext on your transform

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

Should be

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

这篇关于转换原点不适用于 safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！