3D翻页（智障版）

太过爱你忘了你带给我的痛 2022-05-09 14:08 173阅读 0赞

自己写了个很智障的翻页效果，纯属参考，也可以自己改进效果。

html,body{
    				height: 100%;
    				width: 100%;
    				margin: 0;
    				padding: 0;
    			}
    			.outer {
    			    width: 100%;
    			    height: 100%;
    			    display: flex;
    			    flex-wrap: wrap;
    			    justify-content: center;
    			    align-items: center;
        
    }
    
    
    .inner {
    	width: 300px;
    	height: 300px;
        /*开启3D视图*/
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        transition: 0.5s all linear;
    }
    #d1,#d2,#d3,#d4,#d5,#d6{
    	position: absolute;
    	
    	width: 300px;
    	height: 300px;
    	display: flex;
        justify-content: center;
        align-items: center;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    #d1{
    	background-color: red;
       transform-origin: 50% 50%;
        transform: rotateZ(0);
       
    }
    #d2{
    	background-color: blue;
        transform-origin: 0% 100%;
        transform: rotateY(-90deg);
    }	
    #d3{
    	background-color: yellow;
        transform-origin: 100% 0%;
        transform: rotateY(90deg);
    }			
    #d4{
    	background-color: palegreen;
        transform: rotateX(90deg);
       	transform-origin: 100% 0%;
    }	
    #d5{
    	background-color: pink;
        transform-origin: 0% 100%;
        transform: rotateX(-90deg);
    }	
    #d6{
    	background-color: burlywood;
        transform-origin: 50% 50%;
        transform: rotateZ(360deg);
    }
    
    #t1:checked ~ .inner {
    	transform-origin: 0% 0%;
    		-webkit-transform:  translateZ(0px) rotateX(0deg) rotateY(0deg);
    }
    #t2:checked ~ .inner {
    	transform-origin: 0% 0%;
    		-webkit-transform: translateZ(-300px) rotateX(0deg) rotateY(90deg) ;
    }
    #t3:checked ~ .inner {
    	transform-origin: 100% 100%;
    		-webkit-transform: translateZ(0px) rotateX(0deg) rotateY(-90deg);
    }
    #t4:checked ~ .inner {
    	transform-origin: 0% 0%;
    		-webkit-transform: translateZ(0px) rotateX(-90deg) rotateY(0deg);
    }
    #t5:checked ~ .inner {
    	transform-origin: 100% 100%;
    		-webkit-transform: translateZ(0px) rotateX(90deg) rotateY(0deg);
    }
    
    input{
    	display: none;
    }

样式不是很复杂，主要是3D效果话了点时间，反正很low就是。

一开始是想写不需要js的点击事件，没想到写着写着就变成了翻页效果。

放上来以示参考。