css3完成超立体式三d照片侧翻歪斜实际效果

日期:2021-03-07 类型:科技新闻 

关键词:在线编辑图片,什么软件可以抠图,在线图片,p图软件电脑版,在线抠图



上午的情况下我在jQuery论坛上看到网友共享的1款CSS3 三d照片侧翻歪斜殊效,感觉实际效果十分棒,实际上话说回家,这玩意的完成真的十分简易,关键是艺术创意非常好。先看来看实际效果图。

怎样,看上去挺非常好吧,歪斜、黑影,让1张很一般的照片变得这般霸气。

此外你还可以在这里查询DEMO演试,电脑鼠标滑过照片时会出現这样的实际效果。

那末接下来大家剖析1下源代码吧,显示信息html编码,十分简易:


拷贝编码
编码以下:

<div onclick="">
<figure>
<figcaption>Autumn, by Lucien Agasse</figcaption>
</figure>
</div>

这里用了HTML5的 figure标识,表明插图,没甚么非常。

随后是CSS编码:


拷贝编码
编码以下:

figure {
margin: 0;
width: 100%;
height: 29.5vw;
background: url("winter-hat.jpg");
background-size: 100%;
transform-origin: center bottom;
transform-style: preserve⑶d;
transition: 1s transform;
}
figure figcaption {
width: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("winter-hat.jpg");
background-size: 100%; height: 50px;
background-repeat: no-repeat;
background-position: bottom;
color: #fff;
position: relative; top: 29.5vw;
transform-origin: center top;
transform: rotateX(⑻9.9deg);
font-size: 1.2vw;
font-family: Montserrat, Arial, sans-serif;
text-align: center;
line-height: 3;
}
figure:before {
content: '';
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.1), inset 0 0 250px 250px rgba(0, 0, 0, 0.1);
transition: 1s;
transform: rotateX(95deg) translateZ(⑻0px) scale(0.75);
transform-origin: inherit;
}

这里大家界定了figure的情况照片,也便是大家要完成3d实际效果的那张照片。另外还界定了照片的叙述信息内容款式,这样在照片侧翻后更为凸显立体式实际效果。

接下来便是电脑鼠标滑过的动漫实际效果了:


拷贝编码
编码以下:

div:hover figure {
transform: rotateX(75deg) translateZ(5vw);
}
div:hover figure:before {
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5), inset 0 0 250px 250px rgba(0, 0, 0, 0.5);
transform: rotateX(⑸deg) translateZ(⑻0px) scale(1);
}</p> <p>@media screen and (max-width: 800px) {
div { width: 50%; }
figure { height: 45vw; }
figure figcaption {
top: 45vw;
font-size: 2vw;
}
}</p> <p>@media screen and (max-width: 500px) {
div {
width: 80%;
margin-top: 1rem;
}
figure {
height: 70vw;
}
figure figcaption {
top: 70vw;
font-size: 3vw;
}
}

很非常容易能够看出这里运用了css3的transform特性,在其中rotateX来旋转,translateZ来完成Z轴的三d变换,思路都十分清楚。