如何用一个元素创建一个 3D 透视图?
How to create a 3D perspective image with one element?
我有一个代码,给定的图像在 3D 中产生透视效果。这是结果:
这是代码:
.thumb {
margin: 100px;
perspective: 1000px;
width: 1920px;
height: 1200px;
}
.thumb a {
--bg-pseudo: rotateY(120deg); /*Modificar transform */
--bg-pseudo2: --bg-pseudo2', '-5px -15px 45px 130px rgba(0, 0, 0, 0.3); /*modificar box-shadow */
display: block;
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('https://www.wallpaperk.com/wallpapers/white-wolf-painting-5111.jpg');
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 2s;
transform: rotateY(40deg);
/* From rotateX */
transform-origin: left;
/* From bottom */
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.thumb a:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 100%;
background: inherit;
background-size: cover, cover;
background-position: 0px 0px;
transform: var(--bg-pseudo);
transform-origin: left;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.thumb a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
box-shadow: var(--bg-pseudo2);
transition: all 2s;
opacity: 1;
transform: rotateX(0) translateZ(-20px) scale(0.85);
transform-origin: bottom;
}
<div class="thumb" id="thumb">
<a href="#"></a>
</div>
问题是,当我在 HTML 中使用它与 <div>
和 <a>
一起使用时,我想将它与 <img>
[=17= 一起使用]
问题是:有没有一种方法可以通过在图像中放置 class 来实现同样的效果?
<img src="foto.jpg" class="3dPerspective">
CSS会怎样?请注意,结果有阴影。
这是使用 clip-path
和 mask
的近似值。由于 mask
降低了不透明度,在某些情况下它可能无法很好地呈现
.box {
--x:10px;
--y:20px;
clip-path:polygon(
0 var(--x),var(--y) 0,
100% 0,100% 100%,
var(--y) 100%,0 calc(100% - var(--x)));
margin:30px;
transform-origin:left;
transform:perspective(1000px) rotateY(40deg);
-webkit-mask:linear-gradient(to right,#fff var(--y),rgba(0,0,0,0.8) 0);
mask:linear-gradient(to right,#fff var(--y),rgba(0,0,0,0.8) 0);
}
<img src="https://picsum.photos/id/1072/600/300" class="box">
<img src="https://picsum.photos/id/104/600/300" class="box">
另一个更好地支持轮廓的想法,没有不透明度问题,但您需要稍微剪切一下图像:
.box {
--x:10px;
--y:20px;
clip-path:polygon(
0 calc(var(--x) + var(--y)),var(--y) var(--y),
calc(100% - var(--y)) var(--y),calc(100% - var(--y)) calc(100% - var(--y)),
var(--y) calc(100% - var(--y)),0 calc(100% - var(--x) - var(--y)));
margin:30px;
transform-origin:left;
transform:perspective(1000px) rotateY(40deg);
outline: var(--y) solid rgba(0,0,0,0.4);
outline-offset: calc(-1*var(--y));
}
<img src="https://picsum.photos/id/1072/600/300" class="box">
<img src="https://picsum.photos/id/104/600/300" class="box">
我有一个代码,给定的图像在 3D 中产生透视效果。这是结果:
这是代码:
.thumb {
margin: 100px;
perspective: 1000px;
width: 1920px;
height: 1200px;
}
.thumb a {
--bg-pseudo: rotateY(120deg); /*Modificar transform */
--bg-pseudo2: --bg-pseudo2', '-5px -15px 45px 130px rgba(0, 0, 0, 0.3); /*modificar box-shadow */
display: block;
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('https://www.wallpaperk.com/wallpapers/white-wolf-painting-5111.jpg');
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 2s;
transform: rotateY(40deg);
/* From rotateX */
transform-origin: left;
/* From bottom */
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.thumb a:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 100%;
background: inherit;
background-size: cover, cover;
background-position: 0px 0px;
transform: var(--bg-pseudo);
transform-origin: left;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.thumb a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
box-shadow: var(--bg-pseudo2);
transition: all 2s;
opacity: 1;
transform: rotateX(0) translateZ(-20px) scale(0.85);
transform-origin: bottom;
}
<div class="thumb" id="thumb">
<a href="#"></a>
</div>
问题是,当我在 HTML 中使用它与 <div>
和 <a>
一起使用时,我想将它与 <img>
[=17= 一起使用]
问题是:有没有一种方法可以通过在图像中放置 class 来实现同样的效果?
<img src="foto.jpg" class="3dPerspective">
CSS会怎样?请注意,结果有阴影。
这是使用 clip-path
和 mask
的近似值。由于 mask
.box {
--x:10px;
--y:20px;
clip-path:polygon(
0 var(--x),var(--y) 0,
100% 0,100% 100%,
var(--y) 100%,0 calc(100% - var(--x)));
margin:30px;
transform-origin:left;
transform:perspective(1000px) rotateY(40deg);
-webkit-mask:linear-gradient(to right,#fff var(--y),rgba(0,0,0,0.8) 0);
mask:linear-gradient(to right,#fff var(--y),rgba(0,0,0,0.8) 0);
}
<img src="https://picsum.photos/id/1072/600/300" class="box">
<img src="https://picsum.photos/id/104/600/300" class="box">
另一个更好地支持轮廓的想法,没有不透明度问题,但您需要稍微剪切一下图像:
.box {
--x:10px;
--y:20px;
clip-path:polygon(
0 calc(var(--x) + var(--y)),var(--y) var(--y),
calc(100% - var(--y)) var(--y),calc(100% - var(--y)) calc(100% - var(--y)),
var(--y) calc(100% - var(--y)),0 calc(100% - var(--x) - var(--y)));
margin:30px;
transform-origin:left;
transform:perspective(1000px) rotateY(40deg);
outline: var(--y) solid rgba(0,0,0,0.4);
outline-offset: calc(-1*var(--y));
}
<img src="https://picsum.photos/id/1072/600/300" class="box">
<img src="https://picsum.photos/id/104/600/300" class="box">