转换原点不适用于 safari

本文介绍了转换原点不适用于 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 { 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>

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