Edit in JSFiddle

var c = 250;

document.getElementById("test-0").style.cssText += "-webkit-transform-origin: " + c + "px " + c + "px " + c + "px;";

document.getElementById("test-1").style.cssText += "-webkit-transform-origin: " + c + "px " + c + "px " + c + "px;";

document.getElementById("test-2").style.cssText += "-webkit-transform-origin: " + c + "px " + c + "px " + c + "px;";

document.getElementById("test-3").style.cssText += "-webkit-transform-origin: " + c + "px " + c + "px " + c + "px;";

<h1>Safari <code>transform-origin</code> z bug?</h1>
<p>When changing the value of a <code>transform-origin</code>'s <code>z</code> component Safari seems to automatically translate the element to the specificed position if a <code>transform</code> has been defined.</p>
<p>In this example the <code>transform</code> property is set to <code>translateX(0) translateY(0) translateZ(0)</code> and the <code>transform-origin</code> is set to <code>250px 250px 250px</code> yet the browser is rendering the object as if it was translated by <code>250px</code> along the z-axis:</p>
    
<div class="test">
    <div id="test-1" class="box">Test</div>
</div>

<p>In this example the <code>transform</code> property is set to <code>rotateX(0)</code> and the <code>transform-origin</code> is set to <code>250px 250px 250px</code> yet the browser is rendering the object as if it was translated by <code>250px</code> along the z-axis:</p>

<div class="test">
    <div id="test-2" class="box">Test</div>
</div>

<p>In this example the <code>transform</code> property is set to <code>rotateY(0)</code> and the <code>transform-origin</code> is set to <code>250px 250px 250px</code> yet the browser is rendering the object as if it was translated by <code>250px</code> along the z-axis:</p>

<div class="test">
    <div id="test-3" class="box">Test</div>
</div>

<p>This is the control. It's <code>transform</code> property is not set (using default values) and the <code>transform-origin</code> is set to <code>250px 250px 250px</code>. The browser is rendering the object as expected:</p>

<div class="test">
    <div id="test-0" class="box">Test</div>
</div>

.test {
    -webkit-perspective: 700px;
    -webkit-transform-style: preserve-3d;
}
.box {
    background: red;
}
#test-1 {
    -webkit-transform: translateX(0) translateY(0) translateZ(0);
}
#test-2 {
    -webkit-transform: rotateX(0);
}
#test-3 {
    -webkit-transform: rotateY(0);
}