圍繞其中心旋轉僞元素？

我創建了一個簡單的樹形菜單。切換的項目使用JQuery顯示其子項並切換一個「打開」類。圍繞其中心旋轉僞元素？

我有一個「：之前的」加號上的項目，打開的時候它旋轉135度到X，看到gif動畫：

enter image description here

正如你所看到的，它旋轉「起來」。我希望它圍繞其中心旋轉（我認爲這是默認設置）。這裏是我的代碼：

.nav-header { 
    color: gray; 
    font-weight: bold; 
    font-size: 16px; 
    padding-top: 10px; 
    cursor: pointer; 
    &:before { 
     content: '+'; 
     font-size: 23px; 
     display: inline-block; 
     -webkit-transition: all .3s; 
     -moz-transition: all .3s; 
     -ms-transition: all .3s; 
     -o-transition: all .3s; 
     transition: all .3s; 
    } 
    &.open { 
     &:before { 
      -webkit-transform-origin: center center; 
      -moz-transform-origin: center center; 
      -ms-transform-origin: center center; 
      -o-transform-origin: center center; 
      transform-origin: center center; 
      -webkit-transform: rotate(135deg); 
      -moz-transform: rotate(135deg); 
      -ms-transform: rotate(135deg); 
      -o-transform: rotate(135deg); 
      transform: rotate(135deg); 
     }

來源

2014-02-19 Steve

您是否試過'transform-origin：center center;'？ – apohl

只是一個瘋狂的猜測，但是在這裏使用'middle middle'如何：'transform-origin：middle right;' – krowe

是的，嘗試了中心，50％50％等。 – Steve

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

嘗試transform-origin: center center;

編輯：需要供應商特定的前綴：

-moz-transform-origin: center center; 
-webkit-transform-origin: center center; 
-o-transform-origin: center center; 
-ms-transform-origin: center center; 
transform-origin: center center;

編輯2：

看看這個小提琴看它在操作中：http://jsfiddle.net/B226E/18/

來源

2014-02-19 19:26:07 jtheis

試過，得到上面的結果。 – Steve

查看我發給你的鏈接。好像有一些供應商特定的前綴需要各種瀏覽器。還更新了我的答案。 – jtheis

另外，我認爲它並不重要，因爲X太小了，但頁面其餘部分的佈局是在元素旋轉之前確定的，所以如果它的大小和/或奇怪的形狀，它可能會重疊其他元素。 – jtheis

您可以使用

#element:hover { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    }

來源

2014-02-19 19:35:58

我試圖把+變成x – Steve

OK，這現在是：

enter image description here

我使用的是引導glyphicon，添加一些填充在其右側和轉移中心10％：

.nav-header { 
    color: gray; 
    font-weight: bold; 
    font-size: 16px; 
    padding-top: 10px; 
    cursor: pointer; 
    display: inline-block; 
    &:before { 
     content: '\2b'; 
     font-family: 'Glyphicons Halflings'; 
     padding-right: 3px; 
     font-weight: normal; 
     display: inline-block; 
     color: @brand-primary; 
     -webkit-transition: all .3s; 
     -moz-transition: all .3s; 
     -ms-transition: all .3s; 
     -o-transition: all .3s; 
     transition: all .3s; 
     -webkit-transform-origin: 40% center; 
     -moz-transform-origin: 40% center; 
     -ms-transform-origin: 40% center; 
     -o-transform-origin: 40% center; 
     transform-origin: 40% center; 
    } 
    &.open { 
     &:before { 
      -webkit-transform: rotate(135deg); 
      -moz-transform: rotate(135deg); 
      -ms-transform: rotate(135deg); 
      -o-transform: rotate(135deg); 
      transform: rotate(135deg); 
     } 
    } 

}

來源

2014-02-19 19:58:07 Steve

這是用清晰的gif和沒有投票的最佳方式。固定） –

圍繞其中心旋轉僞元素？

回答

相關問題