3D幻灯片轮换（CSS3+原生js）

最新推荐文章于 2021-08-07 14:26:56 发布

Xjl1992

最新推荐文章于 2021-08-07 14:26:56 发布

阅读量639

点赞数 1

分类专栏： js 文章标签： javascript css3 3d

本文链接：https://blog.csdn.net/Xjl1992/article/details/52806960

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background:black;
}
#wrap{
width: 100%;
height: 200px;
margin-top:150px ;
position: relative;/*相对定位   不动的参照物*/
transform-style: preserve-3d;/*类似于一个3D画布*/
perspective: 800px; /*效果近大远小，体现立体感*/
}
#wrap img{
width: 300px;
height: 200px;
position: absolute;/*绝对定位  要动的 ，父元素是他的参照物*/
border-radius: 3px;/*圆角*/
box-shadow: 0 0 5px #0f0;
-webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0,0,0,0) 20%, rgba(0,0,0,.7) 100%);/*reflect：倒影 偏离像素；-webkit-linear-gradient：渐变*/
transition: .8s;/*图片动态轮换的时间*/
}
.left{
transform: rotateY(45deg) translateZ(-100px); /* rotateY ：按Y轴旋转45度；translateZ：3D转换Z轴的值*/
}
.middle{
transform: translateZ(100px);
}
.right{
transform: rotateY(-45deg) translateZ(-100px);
}
</style>