用HTML5如何实现可旋转的3D相册
导读：这篇文章给大家介绍了“用HTML5如何实现可旋转的3D相册”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“用HTML5如何实现可旋转的3D相册”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学...
这篇文章给大家介绍了“用HTML5如何实现可旋转的3D相册”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“用HTML5如何实现可旋转的3D相册”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。我们先来看一下实现效果：
H5旋转3D相册，鼠标放置暂停，图片灰度级为0，有放大效果。
该实例运用H5和CSS3动画效果，未用javascript。提高了本人对CSS3 新属性的了解及掌握。
完整代码如下所示：
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>
HTML5 3D旋转图片相册 可鼠标悬停/title>
style>
*{
padding: 0;
margin: 0;
border: none;
outline: none;
box-sizing: border-box;
}
*:before,*:after{
box-sizing: border-box;
}
html,body{
min-height: 100%;
}
body{
background-image: radial-gradient(mintcream 0%, lightgray 100%);
;
}
.Container{
margin: 4% auto;
width: 210px;
height: 140px;
position: relative;
perspective: 1000px;
}
#carousel{
width: 100%;
height: 100%;
position: absolute;
transform-style:preserve-3d;
animation: rotation 20s infinite linear;
}
#carousel:hover{
animation-play-state: paused;
}
#carousel figure{
display: block;
position: absolute;
width: 220px;
height: 120px;
left: 10px;
top: 10px;
background: black;
overflow: hidden;
border: solid 5px black;
}
img{
filter: grayscale(1);
cursor: pointer;
transition:all 0.3s ease 0s;
width: 100%;
height: 100%;
}
img:hover{
filter: grayscale(0);
transform: scale(1.2,1.2);
}
#carousel figure:nth-child(1){
transform: rotateY(0deg) translateZ(288px);
}
#carousel figure:nth-child(2) {
transform: rotateY(60deg) translateZ(288px);
}
#carousel figure:nth-child(3) {
transform: rotateY(120deg) translateZ(288px);
}
#carousel figure:nth-child(4) {
transform: rotateY(180deg) translateZ(288px);
}
#carousel figure:nth-child(5) {
transform: rotateY(240deg) translateZ(288px);
}
#carousel figure:nth-child(6) {
transform: rotateY(300deg) translateZ(288px);
}
@keyframes rotation{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
/style>
/head>
body>
div>
div id="carousel">
figure>
img src="../myWeb/素材/5cms.jpg" alt="">
/figure>
figure>
img src="../myWeb/素材/5cms2.jpg" alt="">
/figure>
figure>
img src="../myWeb/素材/5cms3.jpg" alt="">
/figure>
figure>
img src="../myWeb/素材/5cms4.jpg" alt="">
/figure>
figure>
img src="../myWeb/素材/5cms5.jpg" alt="">
/figure>
figure>
img src="../myWeb/素材/5cms6.jpg" alt="">
/figure>
/div>
/div>
/body>
/html以上就是关于“用HTML5如何实现可旋转的3D相册”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 用HTML5如何实现可旋转的3D相册
本文地址： https://pptw.com/jishu/654726.html