持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第28天，点击查看活动详情
问题来源
最近在写一个需求，某个图片需要旋转一定的角度做展示，想到了css中的transform属性。如下图
我需要这个背景图绕Y轴旋转一定的角度，与墙面贴合，那么应该怎么做呢？这里肯定要想要3d变换了。
需求实现
前期先查阅了关于3d变换的相关知识点如下。
父元素样式
3D变换需要父元素设置样式才能保留3d的变化效果
保留3D变换：transform-style: preserve-3d，默认值为flat表示不保留3D变换
设置视角深度：perspective: 1000px
观察点位置：perspective-origin
- 默认值为：perspective-origin: center center;
- 第一个代表x轴上的位置，第二个值代表y轴上的位置
- 取值可以为：关键字、长度值，百分比值(相对于当前元素的宽或高)，可以为负值
- 可以设置的关键字：top bottom center left right
- 上面关键字的顺序无关，浏览器会自动调整
- top == 0% bottom == 100% center == 50% left == 0% right == 100%
- 设置的偏移值都是从元素左上角开始的
位移：translate3d translateX translateY translateZ
- translate3d(x, y, z)：必须传递三个参数
- translateX(x) translateY(y) translateZ(z)
- 参数单位为px
- x值：为正则沿着x轴向右位移，为负则沿着x轴向右位移
- y值：为正则沿着y轴向下位移，为负则沿着y轴向上位移
- z值：为正则沿着z轴向屏幕外位移，为负则沿着z轴向屏幕内位移
旋转：rotate3d rotateX rotateY rotateZ
rotate3d(x, y, z, angle)：沿着x，y，z三个方向矢量值确定的坐标点旋转angle角度(比较少用)
x，y，z为三个方向的矢量值，无单位rotateX(angle) rotateY(angle) rotateZ(angle) 沿着元素中心点穿过的(X/Y/Z)轴旋angle角度
参数angle单位为deg
angle值：为正则为顺时针旋转，为负则为逆时针旋转
可以通过transform-origin: left来设置比如绕着元素的左边框旋转
backface-visibility 属性定义当元素旋转到背面向屏幕时是否可见
- visible 背面可见
- hidden 背面不可见
缩放：scale3d scaleX scaleY scaleZ
- scale3d(num, num, num)：必须传递三个参数
- scaleX(x) scaleY(y) scaleZ(z)，分别代表x和y轴和z轴方向缩放相应的倍数
- 参数为数字，无单位
- scaleZ(z)是难点，指的z轴方向上的纵深，并不会在z轴方向加厚元素，需要在父元素设置，然后观察子元素位移距离的增加
对于这里我们应该实现transform属性即可，如下
.v-parent {
position: absolute;
left: 2400rpx;
top: 526rpx;
transform-style: preserve-3d;//保留3D变换
perspective: 1000;
.v-child {
position: relative;
// transform: rotate3d(0, 0.5, 0, -60deg);
transform: rotateY(-60deg);
display: flex;
justify-content: center;
align-items: center;
width: 650rpx;
height: 334rpx;
background-image: url(~@/static/bg-room-right.png);
background-repeat: no-repeat;
background-size: cover;
.img-src {
width: 632rpx;
height: 316rpx;
}
}
这样就可以达到效果，可以看到饶Y轴旋转了一定的角度，但是当用苹果真机测试的时候，发现不显示了，旋转后元素不见了。
解决问题
经查验测试需要在父元素在设置一层属性
transform-style: flat;/* 让子盒子位于此元素所在的平面内（子盒子被扁平化） 默认值为flat表示不保留3D变换*/
这样就可以在3d变换后，在保留回扁平化平面，保持同一个平面显示，因此可以正常显示了，之前我感觉如果没有设置这个，那么旋转后可能到父元素的背面去了，因此看不到了。
总结
css3的这个transform属性可能还是多少存在一些兼容性问题，开发过程就是得不断试验，查阅资料，一定能解决问题。
