网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款纯css实现的图片/照片在3D空间中旋转效果。
使用方法:
1.添加旋转图片。
<div class="rotator">
<div class="items">
<img src="1.jpg" alt="Image Alt" />
</div>
<div class="items">
<img src="2.jpg" alt="Image Alt" />
</div>
<div class="items">
<img src="3.jpg" alt="Image Alt" />
</div>
<div class="items">
<img src="4.jpg" alt="Image Alt" />
</div>
<div class="items">
<img src="5.jpg" alt="Image Alt" />
</div>
<div class="items">
<img src="6.jpg" alt="Image Alt" />
</div>
<div class="items">
<img src="7.jpg" alt="Image Alt" />
</div>
<div class="items">
<img src="8.jpg" alt="Image Alt" />
</div>
<div class="items">
<img src="9.jpg" alt="Image Alt" />
</div>
</div>
2.旋转的核心样式。
.rotator {
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 55%;
height: 150px;
transform-style: preserve-3d;
animation: roter 17s linear infinite;
}
.rotator:hover {
animation-play-state: paused;
}
@keyframes roter {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
.items {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
border: 2px solid #333;
}
.items:hover img {
transform: scale(1.2);
}
.items img {
height: 100%;
width: 100%;
transition: all 3s ease;
}
3.确定每个图像的初始位置。
.items:first-child {
transform: rotateY(calc(40deg * 1)) translateZ(300px);
}
.items:nth-child(2) {
transform: rotateY(calc(40deg * 2)) translateZ(300px);
}
.items:nth-child(3) {
transform: rotateY(calc(40deg * 3)) translateZ(300px);
}
.items:nth-child(4) {
transform: rotateY(calc(40deg * 4)) translateZ(300px);
}
.items:nth-child(5) {
transform: rotateY(calc(40deg * 5)) translateZ(300px);
}
.items:nth-child(6) {
transform: rotateY(calc(40deg * 6)) translateZ(300px);
}
.items:nth-child(7) {
transform: rotateY(calc(40deg * 7)) translateZ(300px);
}
.items:nth-child(8) {
transform: rotateY(calc(40deg * 8)) translateZ(300px);
}
.items:nth-child(9) {
transform: rotateY(calc(40deg * 9)) translateZ(300px);
}
转载请注明来源:纯css图像3d旋转效果特效代码
本文永久链接地址:https://www.moyouyouw.cn/code/701.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论