微信小程序实现打卡（翻转效果）

perspective定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

tips：perspective 属性只影响 3D 转换元素。

提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

backface-visibility 属性定义当元素不面向屏幕时是否可见。

如果在旋转元素不希望看到其背面时，该属性很有用

rotateY(angle) 定义沿着 Y 轴的 3D 旋转。180deg翻转到背面。

鼠标左键点击一下图片，查看图片。点击图片下方的旋转标志。鼠标左键点击一下旋转标志，图片顺时针90度旋转一下。再次点击鼠标，图片调正为止。如果我们只是预览图片，为了看得更清楚，这时候就可以了，但是如果要保存或者下载图片，图片依然是原图片（颠倒的），这时我们可以下载后用别的软件调整，也可以截图，这里我们就截下图。摁住截图的快捷键（截图快捷键可在设置里查看），截取图片，下载保存或者完成。这样就完成了图片的旋转调整。

竖屏模式变为横屏模式。

1、在企业微信主界面，点击左上方的三条杠的图标。2、然后再点击下方齿轮的图标。3、点击通用。4、再点击开启横屏模式，就可以竖屏切换横屏改变企业微信小窗口方向了。

方法/步骤

双击小程序开发者工具，打开小程序开发者工具，我们可以看到在启动界面，有很多我们之前开发过得小程序列表。

小程序横屏怎么做

我们选择其中的一个小程序进行测试，该小程序页面较多，内容较丰富，有利于我们演示横屏。

小程序横屏怎么做

首先看第一种情况，我们找到一个页面，打开该页面的json文件，可以看到，目前里面没有配置任何关于横屏的设置，界面也是竖的。

小程序横屏怎么做

然后我们在该json文件里，增加一句话【"pageOrientation": "landscape"】，这句话使得只要进入该页面，界面自动横屏，即不需要手机横过来也会强制横屏。

小程序横屏怎么做

然后我们看另一个横屏方法，打开全局变量app.json文件，在window里，目前没有看到关于横屏的设置。

小程序横屏怎么做

在window里面，加入一句话，【"pageOrientation": "auto"】，这句话加入之后，保存下文件，然后可以看到调试工具上方多了一个【旋转】按钮，如图所示，我们点击该按钮后，界面自动横过来了。

这里设置了全局变量，在手机横过来时，自动旋转所有的页面。然后我们刚才点击的【旋转】按钮，也是模拟手机的旋转功能，故界面横过来了。

如果觉得有用，记得点赞或投票！

小程序横屏怎么做

---