情况:
在我的特定情况下,我有3D相框图像和2D照片.我希望2D照片使用CSS3变换功能(旋转,缩放,偏斜)匹配3D帧.
问题:
我无法使用手动方法精确匹配两者,也就是输入旋转值并观察它的作用.
理想的解决方案#1
存在在线视觉工具,可以拖动照片的角落(就像Photoshop一样),它可以为您提供正确的CSS3变换值.
理想的解决方案#2
存在非可视化工具 - 与之前相同,但您手动输入4点坐标(图像角),它会为您提供正确的CSS3变换值.
真正解决这个问题
如果没有这样的工具(我的搜索没有找到),我希望有人尝试解释它背后的数学,这样我就可以自己计算 - 如果有可能的话？
我为你准备了JSFiddle演示: Demo
/* Main issue here */
.transform {
transform: rotateX(34deg) rotateZ(13deg) rotateY(-10deg) scaleY(1) scaleX(1) skewY(0deg) skewX(0deg) translateY(0px) translateX(20px);
transform-origin: 50% 0% 0;
}
/* Supporting styles */
.container {
position: relative;
width: 500px;
height: 500px;
}
.frame,
.photo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.photo {
top: 50px;
left: 95px;
right: 65px;
bottom: …