如何使用CSS透视图将元素定位在正确的3D位置 [英] How to position element in the correct 3d position with css perspective
问题描述
我正试图找到一种方法来将元素映射到以给定角度放置的照片元素之上。笔记本电脑的照片就是一个很好的例子，例如，我想在屏幕顶部映射一个元素（视频，图像或其他），比如说循环播放视频等。
任务似乎很容易，但是我发现它很棘手，因为我找不到如何通过旋转，缩放，平移甚至歪斜变换正确解决问题的方法。
以下是我要实现的代码示例，元素是绿色的SPAN
Html：
<！ DOCTYPE html>
< html>
< head>
< meta charset = utf-8>
< meta name = viewport content = width = device-width>
< title> JS Bin< / title>
< / head>
< body>
< div>
< span< / span>
< img src = http://www.thesugarrefinery.com/wp-content/uploads/2015/08/sugar-macbook-7-5-perspective.png />
< / div>
< / body>
< / html>
css：
div {
职位：相对；
}
span {
背景：绿色；
宽度：350像素；
高度：200像素；
头寸：绝对；
top：0；剩余
：0；
角度：250像素；
转换：rotateX（0deg）rotateY（40deg）rotateZ（0deg）歪斜X（-10deg）translateX（220px）translateY（25px）scale（.94）;
不透明度：0.5；
}
img {
宽度：500像素；
高度：自动；
}
和摘要：
div {位置：相对；} span {背景：绿色；宽度：350像素；高度：200px；位置：绝对；最高：0;左：0；视角：250px；变换：rotateX（0deg）rotateY（40deg）rotateZ（0deg）歪斜X（-10deg）translateX（220px）translateY（25px）比例尺（.94）;透明度：0.5;} img {宽度：500px;高度：自动；}
<！DOCTYPE html>< ; html>< head> < meta charset = utf-8> < meta name = viewport content = width = device-width> < title> JS Bin< / title< / head< body> < div> < span>< / span> < img src = https://i.stack.imgur.com/iL2xf.png /> < / div> < / body>< / html>
视角需要添加到父级而不是子级。其余的是详细信息：
span {背景：绿色；宽度：256像素；高度：176像素；位置：绝对；最高：0;左：0；变换：rotateX（1deg）rotateY（-7deg）rotateZ（-1deg）偏斜（-11.25deg，1.5deg）translate（233px，37px）;透明度：0.5；} div {位置：相对；视角：400px； width：1200px;} img {宽度：500px;高度：自动；}正文{溢出-x：隐藏；}
< div> < span>< / span> < img src = https://i.stack.imgur.com/iL2xf.png />< / div>
I'm trying to find a way to map an element, on top of a photo element that is placed at a given angle. The photo of a laptop is a good example, where I'd like to map an element (video, image, or other) on top of the screen, for example, let's say to loop a video etc.
The task seemed quite easy but I'm finding it quite tricky, because I couldn't find how to solve it properly with transforms rotate, scale, translate and even skew.
Here's a code example of what I want to achieve, the over element is the SPAN coloured green
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<span></span>
<img src="http://www.thesugarrefinery.com/wp-content/uploads/2015/08/sugar-macbook-7-5-perspective.png" />
</div>
</body>
</html>
css:
div {
position: relative;
}
span {
background: green;
width: 350px;
height: 200px;
position: absolute;
top: 0;
left: 0;
perspective: 250px;
transform: rotateX(0deg) rotateY(40deg) rotateZ(0deg) skewX(-10deg) translateX(220px) translateY(25px) scale(.94);
opacity: 0.5;
}
img {
width: 500px;
height: auto;
}
And the snippet:
div {
position: relative;
}
span {
background: green;
width: 350px;
height: 200px;
position: absolute;
top: 0;
left: 0;
perspective: 250px;
transform: rotateX(0deg) rotateY(40deg) rotateZ(0deg) skewX(-10deg) translateX(220px) translateY(25px) scale(.94);
opacity: 0.5;
}
img {
width: 500px;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<span></span>
<img src="https://i.stack.imgur.com/iL2xf.png" />
</div>
</body>
</html>
perspective needs to be added to the parent, not to the child. The rest are details:
span {
background: green;
width: 256px;
height: 176px;
position: absolute;
top: 0;
left: 0;
transform: rotateX(1deg) rotateY(-7deg) rotateZ(-1deg) skew(-11.25deg, 1.5deg) translate(233px, 37px);
opacity: 0.5;
}
div {
position: relative;
perspective: 400px;
width: 1200px;
}
img {
width: 500px;
height: auto;
}
body {
overflow-x: hidden;
}
<div>
<span></span>
<img src="https://i.stack.imgur.com/iL2xf.png" />
</div>
这篇关于如何使用CSS透视图将元素定位在正确的3D位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
