js实现倾斜图片点击弹出上下切换效果代码-html代码-BFW代码库

js实现倾斜图片点击弹出上下切换效果代码

代码语言：html

代码描述：js实现倾斜图片点击弹出上下切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body,p{
    	margin: 0;
    }
    ul{
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    img{
    	border: none;
    	vertical-align: middle;
    }
    body{
    	background: #000000;
    	color: #fff;
    
    	overflow-x: hidden;	/* 旋转后会出现横向的滚动条 */
    }
    
    
    
    
    
    /*works*/
    #wrap{margin-top: 150px}
    #wrap ul{
    	width: 1050px;
    	margin: 0 auto;
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: space-between;
    
    	transform-style: preserve-3d;	/* 自己变成3d的空间是为了图片像弹簧一下能出来，加不加景深都可以，加了会视觉冲击感强烈一点 */
    	transform: translateY(-15%) rotateX(45deg) rotateZ(45deg);	/* 先往右转45deg，斜着(wtud3)了，再往后一把推倒（旋转Z轴45deg） */
    }
    #wrap li{
    	width: 330px;
    	height: 230px;
    	margin-bottom: 30px;
    	position: relative;
    	background: rgba(255,255,255,0.5);	/* 给一个灰色的底色 */
    	cursor: pointer;
    }
    #wrap li img,#wrap li div{
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	left: 0;
    	top: 0;
    
    	transition: 0.3s;	/* 加上运动效果 */
    }
    #wrap li img{
    	z-index: 2;	/* 把图片放到最上面 */
    }
    #wrap li div:nth-of-type(1){
    	background: #ac5cf5;
    	opacity: 0.5;
    }
    #wrap li div:nth-of-type(2){
    	background: #5db4eb;
    	opacity: 0.5;
    }
    #wrap li div:nth-of-type(3){
    	background: #5debb4;
    	opacity: 0.5;
    }
    
    /* 以下为弹簧效果 */
    #wrap li:hover{
    	box-shadow: 0 0 50px #fff;
    }
    #wrap li:hover img:nth-of-type(1){
    	transform: translateZ(100px);
    }
    #wrap li:hover div:nth-of-type(1){
    	transform: translateZ(75px);
    }
    #wrap li:hover div:nth-of-type(2){
    	transform: translateZ(50px);
    }
    #wrap li:hover div:nth-of-type(3){
    	transform: translateZ(25px);
    }
    
    
    #shadowBox{
    	width: 100%;
    	height: 2000px;
    	background: rgba(0,0,0,0.5);
    	position: absolute;
    	left: 0;
    	top: 0;
    	
    	opacity: 0;
    	transition: 0.5s;
    	display: none;	/* 不设置为none的话，它会档住图片 */
    }
    #showPic{
    	width: 600px;
    	height: 400px;
    	box-shadow: 0 0 50px #000;
    	position: fixed;
    
    	left: 0;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	margin: auto;
    	
    	opacity: 0;
    	transition: 0..........完整代码请登录后点击上方下载按钮下载查看