小程序 rotate3d

视图层 wxml

<view id="example-element" bindtap="animationData">
    <view class="transition-all" style="" animation="{{animationData}}">
        <view class="face front">1</view>
        <view class="face back">6</view>
        <view class="face right">2</view>
        <view class="face left">4</view>
        <view class="face top">3</view>
        <view class="face bottom">5</view>
    </view>
</view>

视图层 wxss

#example-element {
    width: 100px;
    height: 100px;
    position: fixed;
    bottom: 50%;
    right:50%;

}

.transition-all {
    /*perspective: 550px;*/
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
}
.face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: inherit;
    font-size: 60px;
    color: #fff;
    border-radius: 20px;
}

.front {
    background: rgb(90,90,90);
    transform: translateZ(50px);
}

.back {
    background: rgb(0,210,0);
    transform: rotateY(180deg) translateZ(50px);
}

.right {
    background: rgb(210,0,0);
    transform: rotateY(90deg) translateZ(50px);
}

.left {
    background: rgb(0,0,210);
    transform: rotateY(-90deg) translateZ(50px);
}

.top {
    background: rgb(210,210,0);
    transform: rotateX(90deg) translateZ(50px);
}

.bottom {
    background: rgb(210,0,210);
    transform: rotateX(-90deg) translateZ(50px);
}

js 控制层

通过 wxml 与 wxss 配合可以形成一个3D视图，通过 js 可以控制转动，这里需要使用 rotate3d，小程序 rotate3d 第四参数 <angle> 只支持 deg 角度；

Component({
    properties:{
        size:{
            type:Number,
            value:100
        },
    },
    data:{
        animationData:{}
    },
    attached(){
        var animation = wx.createAnimation({
            duration:1000,
            timingFunction:"ease",
        })

        this.animation = animation
        this.num=1;

        // animation.scale(2,2).rotate(45).step();
        //
        // this.setData({
        //     animationData:animation.export()
        // })

        setTimeout(function(){
            animation.rotate3d(1,1,-1,360).step();
            this.setData({
                animationData:animation.export()
            })
        }.bind(this),1000)
    },
    methods:{
        animationData(){
            let num=this.num++;
            console.log('animationData',num);
            //this.num++;
            this.num=this.num>6?1:this.num;
            switch (num){
                case 1:
                    this.animation.rotate3d(0,1,0,-90).step();
                    break;
                case 2:
                    this.animation.rotate3d(1,0,0,-90).step();
                    break;
                case 3:
                    this.animation.rotate3d(0,1,0,90).step();
                    break;
                case 4:
                    this.animation.rotate3d(1,0,0,90).step();
                    break;
                case 5:
                    this.animation.rotate3d(1,0,0,180).step();
                    break;
            }
            //this.animation.rotate3d(1,1,-1,180).step();
            this.setData({
                animationData:this.animation.export()
            })
        },
    }
})

标准h5 <angle>支持unit (deg, rad, grad, turn)，具体如下

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d