在transform中使用calc（）：rotate（）

如何使用calc()來確定transform:rotate()的角度值？在transform中使用calc（）：rotate（）

的!mdn docs for the CSS calc() function狀態：

的calc() CSS功能可以在任何地方使用的<length>，<frequency>，<angle>，<time>，<number>，或<integer>是必需的。使用calc()，您可以執行計算來確定CSS屬性值。

但是，使用calc()創建transform:rotate()不是爲我工作的角度值。

this blog doesn't work - transform: rotate(calc(1turn - 32deg));的建議，也沒有以這種方式使用calc()的操作的類似變體。

見this codepen for verification - 只有第五<div>旋轉如預期和不使用calc()確定角度。

下面是從codepen主代碼顯示在這裏：

div { 
    height: 200px; 
    width: 200px; 
    background-color: red; 
} 

.one { 
    transform: rotate(calc(1turn - 32deg)); 
} 

.two { 
    transform: rotate(calc(360deg - 90deg)); 
} 

.three { 
    transform: rotate(calc(360deg/4deg)); 
} 

.four { 
    transform: rotate(calc(22deg + 23deg)); 
} 

.five { 
    transform: rotate(45deg); 
}

同樣的問題跨越最新的Chrome，Firefox的開發版，和Safari發生我。

存在與此問題有關的其他討論，但不提供任何解決方案。例如：

來源

2017-01-02 Brian Zelip

'360deg/4deg'看起來不對 – Banzay

您知道，將正方形旋轉90°或其增量（在您的第二個和第三個示例中）不會顯示出任何可辨別的差異嗎？正方形的對稱軸相隔90°。 – Terry

你得到的唯一問題是'360deg/4deg'，這是因爲你正在尋找'360deg/4'（注意空格並去掉'4'上的'deg'） – Dekel

使用代替

.three { 
    transform: rotate(calc(360deg/4)); 
}

：

.three { 
    transform: rotate(calc(360deg/4deg)); 
}

由於360deg/4deg == 90和360deg/4 = 90deg。你正在尋找一個學位而不是一個純粹的數字。

來源

2017-01-02 01:14:57 Mifort

我也遇到過同樣的問題，並且在Chrome（v59.0）和FF（v54.0）的其他角度transform函數（如skewX和skewY）中也嘗試使用calc()函數。在這兩種情況下，skew函數都沒有像預期的那樣偏移。

注意，用於家庭的基於長度的translate()變換功能calc()功能確實工作（見this Fiddle）。

的translate3D() z方向是不是在我的小提琴工作，但你可以看到它是如何工作的使用上this page

注意如何skewX()工作正常進行#div1作爲一個硬編碼的角度，但如果重新的Codepen鏈接 - 使用calc()作爲參數（例如，嘗試calc(-45deg + 1rad)），使用calc()來代替它，它會打破的css。

來源

2017-07-24 14:52:00

在transform中使用calc（）：rotate（）

回答

相關問題