01 属性值

02 静态 3D

为父级添加 perspective 属性（其大小决定对象变形的程度），为子级设置 rotateX 值和 3D 变换轴心位置 originY。

// 父级设置
export function parent(): Override {
    return {
        perspective: 150,
        // preserve3d: true,
    }
}
//子级设置
export function child(): Override {
    return {
        rotateX: 30,
        originY:1
    }
}

02 点击后翻转卡片

import * as React from "react"
import { Override, Data } from "framer"
const data = Data({
    rotateY: 0,
})
export function button(): Override {
    return {
        onTap() {
            data.rotateY = data.rotateY + 180
        },
    }
}
// 父级设置
export function parent(): Override {
    return {
        // 当 perspective 值为 150 时，变形很明显，值变大时变形变小
        perspective: 1500,
        // preserve3d: true,
    }
}
//子级设置
export function child(): Override {
    return {
        animate: {
            rotateY: data.rotateY,
        },
        transition: {
            duration: 0.2,
        },
        // rotateY: data.rotateX,
        originX: 0.5,
    }
}

https://framer.com/projects/15-Perspective-Wg14xPHDxhyvPe6abAFU

04 拖动改变透视值

左右拖动时联动改变透视效果。

import * as React from "react"
import { Override, motionValue, useTransform } from "framer"
// 创造一个能在多个地方传递的值 x
const x = motionValue(0)
// 父级设置
export function parent(): Override {
    return {
        perspective: 150,
        // preserve3d: true,
    }
}
// 子级设置
export function child(): Override {
    // x在 -100、0、100 之间变化时，rotateY 在 -45、0、 45 之间变化
    const rotateY = useTransform(x, [-100, 0, 100], [-45, 0, 45], {
        clamp: false,
    })
    return {
        x: x,
        drag: "x",
        rotateY: rotateY,
        dragConstraints: {
            left: -100,
            right: 100,
        },
        dragElastic: false,
        dragMomentum: false,
    }
}