纯CSS 3D旋转立体画册第一弹

﹏ヽ暗。殇╰゛Y 2022-10-07 10:52 194阅读 0赞

### 纯CSS 3D旋转立体画册 第一弹 ###

*   *  效果

外层盒子+动画

## 效果 ##

盒子  
![盒子][20210617182127668.png]  
鼠标移入  
![鼠标移入][20210617182208162.png]

HTML

公共CSS样式

/*公共样式--开始*/
    * { 
        margin: 0;
        padding: 0;
    	box-sizing: border-box;
    }
    html, body { 
        min-height: 100%;
    }
     
    body { 
        font-family: "Microsoft YaHei";
        font-size:14px;
        color:#333;
    }
    h1, h2, h3, h4, h5, h6{ font-weight:normal;}
    ul,ol { 
        list-style: none;
    }
     
    img { 
        border: none;
        vertical-align: middle;
    }
     
    a { 
        text-decoration: none;
        color: #232323;
    }
     
    table { 
        border-collapse: collapse;
        table-layout: fixed;
    }
     
    input, textarea { 
        outline: none;
        border: none;
    }
     
    textarea { 
        resize: none;
        overflow: auto;
    }
     
    .clearfix { 
        zoom: 1;
    }
     
    .clearfix:after { 
        content: ".";
        width: 0;
        height: 0;
        visibility: hidden;
        display: block;
        clear: both;
        overflow:hidden;
    }
     
    .fl { 
        float: left
    }
     
    .fr { 
        float: right
    }
     
    .tl { 
        text-align: left;
    }
     
    .tc { 
        text-align: center
    }
     
    .tr { 
        text-align: right;
    }
     
    .ellipse { 
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .inline{ 
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }
    
    
    .flex{ 
    	display: flex;
    }
    .col-center{ 
    	align-items: center;
    }
    .col-top{ 
    	align-items: flex-start;
    }
    .col-bottom{ 
    	align-items: flex-end;
    }
    .row-center{ 
    	justify-content: center;
    }
    .row-between{ 
    	justify-content: space-between;
    }
    .row-evenly{ 
    	justify-content: space-evenly;
    }
    .row-around{ 
    	justify-content: space-around;
    }
    .flex-1{ 
    	flex: 1;
    }

页面CSS

.content { 
    	width: 100%;
    	height: 80vh;
    }
    
    .hover{ 
    	width: 200px;
    	height: 200px;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    }
    
    .box { 
    	width: 100px;
    	height: 100px;
    	transform-style: preserve-3d;
    	perspective: 15000px;
    	animation: Motion 5s linear 0s infinite normal;
    }
    
    .item { 
    	width: 100%;
    	height: 100%;
    	transition: all .5s;
    }
    
    .item:nth-child(1) { 
    	background: #e54d42;
    }
    
    .item:nth-child(2) { 
    	background: #f37b1d;
    	transform-origin: 0 50% 0;
    	transform: translateY(-100px) translateX(100px) translateZ(100px) rotateY(90deg);
    }
    
    .item:nth-child(3) { 
    	background: #fbbd08;
    	transform-origin: 100% 50% 0;
    	transform: translateY(-200px) translateX(-100px) rotateY(90deg);
    }
    
    .item:nth-child(4) { 
    	background: #8dc63f;
    	transform-origin: 50% 100% 0;
    	transform: translateY(-400px) translateX(0) translateZ(100px) rotateX(90deg);
    }
    
    .item:nth-child(5) { 
    	background: #39b54a;
    	transform-origin: 50% 0 0;
    	transform: translateY(-300px) translateX(0) rotateX(90deg);
    
    }
    
    .item:nth-child(6) { 
    	background: #1cbbb4;
    	/* transform-origin: 50% 0 0; */
    	transform: translateY(-500px) translateX(0) translateZ(100px) rotateX(0deg);
    }
    
    .hover:hover > .box > .item:nth-child(1){ 
    	transform: translateZ(-50px);
    }
    .hover:hover > .box > .item:nth-child(2){ 
    	transform: translateY(-100px) translateX(150px) translateZ(100px) rotateY(90deg);
    }
    .hover:hover > .box > .item:nth-child(3){ 
    	transform: translateY(-200px) translateX(-150px) rotateY(90deg);
    }
    .hover:hover > .box > .item:nth-child(4){ 
    	transform: translateY(-450px) translateX(0) translateZ(100px) rotateX(90deg);
    }
    .hover:hover > .box > .item:nth-child(5){ 
    	transform: translateY(-250px) translateX(0) rotateX(90deg);
    }
    .hover:hover > .box > .item:nth-child(6){ 
    	transform: translateY(-500px) translateX(0) translateZ(150px) rotateX(0deg);
    }
    
    @keyframes Motion{ 
    	0{ 
    		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    	}
    	10%{ 
    		transform: rotateX(36deg) rotateY(36deg) rotateZ(72deg);
    	}
    	20%{ 
    		transform: rotateX(72deg) rotateY(72deg) rotateZ(144deg);
    	}
    	30%{ 
    		transform: rotateX(98deg) rotateY(98deg) rotateZ(216deg);
    	}
    	40%{ 
    		transform: rotateX(144deg) rotateY(144deg) rotateZ(288deg);
    	}
    	50%{ 
    		transform: rotateX(180deg) rotateY(180deg) rotateZ(360deg);
    	}
    	60%{ 
    		transform: rotateX(216deg) rotateY(216deg) rotateZ(432deg);
    	}
    	70%{ 
    		transform: rotateX(252deg) rotateY(252deg) rotateZ(504deg);
    	}
    	80%{ 
    		transform: rotateX(288deg) rotateY(288deg) rotateZ(576deg);
    	}
    	90%{ 
    		transform: rotateX(324deg) rotateY(324deg) rotateZ(648deg);
    	}
    	100%{ 
    		transform: rotateX(360deg) rotateY(360deg) rotateZ(720deg);
    	}
    }

[20210617182127668.png]: /images/20221005/50f45cc59e5a4b7a87be5fa66c4a0c0c.png
[20210617182208162.png]: /images/20221005/36536724694646f597cb96248ca9e8c0.png