本文详细介绍了如何使用CSS3实现3D转换和阴影效果，包括`.list`类的选择器应用，背景图片设置，以及`.listulli`元素的3D变换规则。通过设置`transform-style`, `transform`, `transition`等属性，创建了立体卡片效果，并在鼠标悬停时实现了平滑的旋转和阴影变化。此外，还涉及到了边框、圆角、过渡和盒阴影等效果。
*{margin:0px ; padding:0px}
body{background:url("imgs/bg.jpg")}
.list{width:1200px; height:700px;background:rgba(0,0,0,0.3 );
box-shadow:0px 0px 5px #000;margin:20px auto;}
.list ul{padding:2px 0px;list-style-type:none;}
.list ul li{width:240px;height:256px;
float:left;margin:36px 25px;padding:5px;
perspective:1000px;
}
.list .move{width:240px;height:256px;transform-style:preserve-3D;
transform:translateZ(-30px);
/*延长时间 */
transition:transform 12s}
.list .move .poster,.list .move .infor{position:absolute;
border:1px solid #99FF00;width:230px;
height:246px;
backface-visibility:hidden;
}
.list .move .poster{
transform:translateZ(130px);
}
.list .move .infor{
transform:rotateY(90deg) translateZ(130px);
}
.list ul li:hover .move{
transform:rotateY(-88deg) translateZ(20px);
}
.list ul li:hover .move .poster,.list .move .infor{
border-radius:12px;box-shadow:0px 0px 6px #CC00CC;overflow:hidden;
}
扫一扫
3348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
