Windows Phone使用CSS3和3d變換傾斜效果？

Question

按下控件時，Windows Phone具有很好的“傾斜”效果。 它將控件向您單擊/觸摸的那一點傾斜

效果描述如下：

• http://blogs.msdn.com/b/ptorr/archive/2010/03/23/tilt-effect-for-windows-phone-controls.aspx
• http://blogs.msdn.com/b/ptorr/archive/2010/08/11/updated-tilt-effect.aspx

我想知道是否還可以通過CSS3 3D轉換在沒有javascript的幫助下（找到觸摸的位置）來完成？

Answer 1

您可以使用css3轉換來做到這一點

transform: matrix(1, 0, 0.6, 1,  0, 0);

jsfiddle

<div id="button">Defaults (both 0.33)</div>

#button {
    color: white;
    font-family: arial;
    padding: 10px;
    width: 200px;
    height: 20px;
    left: 0px;
    background-color: #111;
    border: 2px solid white;
    -webkit-transform: matrix(1, 0, 0.6, 1,  50, 0);
    transform: matrix(1, 0, 0.6, 1,  50, 0);
}

我猜您將必須拿起接觸點來檢測您是否希望它向左或向右傾斜。 諸如jQuery .position之類的東西可以為您提供幫助。

Answer 2

感謝您的答復。 看起來WinJS已經有一個代碼路徑可以做到這一點，盡管僅在電話上即可。 但是，在非電話代碼路徑上也很容易被黑客入侵：

// Returns a CSS transformation to rotate and shrink an element when it is
// pressed. The closer the click is to the center of the item, the more it
// shrinks and the less it rotates.
// *elementRect* should be of the form returned by getBoundingClientRect. All
// of the parameters must be relative to the same coordinate system.
// This function was translated from the Splash implementation.
function tiltTransform(clickX, clickY, elementRect) {
    // x and y range from 0.0 thru 1.0 inclusive with the origin being at the top left.
    var x = _ElementUtilities._clamp((clickX - elementRect.left) / elementRect.width, 0, 1);
    var y = _ElementUtilities._clamp((clickY - elementRect.top) / elementRect.height, 0, 1);

    // Axis is perpendicular to the line drawn between the click position and the center of the item.
    // We set z to a small value so that even if x and y turn out to be 0, we still have an axis.
    var axis = {
        x: y - 0.5,
        y: -(x - 0.5),
        z: 0.0001
    };

    // The angle of the rotation is larger when the click is farther away from the center.
    var magnitude = Math.abs(x - 0.5) + Math.abs(y - 0.5); // an approximation
    var angle = magnitude * MAX_TILT_ROTATION;

    // The distance the control is pushed into z-space is larger when the click is closer to the center.
    var scale = 1 - (1 - magnitude) * MAX_TILT_SHRINK;

    var transform = "perspective(800px) scale(" + scale + ", " + scale + ") " + rotationTransform3d(angle, axis);

    return transform;
}