Question

按下控件时，Windows Phone会产生很好的“倾斜”效果。它会将控件倾斜到您单击/触摸的位置

enter image description here

此处描述了效果：

我想知道是否可以通过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;
}

使用CSS3和3D转换的Windows Phone倾斜效果？

2 个答案: