CSS3实现3d、过渡、变化案例

﹏ヽ暗。殇╰゛Y 2022-04-05 14:14 293阅读 0赞

**一开始盒子状态：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTczMjQzMA_size_16_color_FFFFFF_t_70][]

** 过渡过程：**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTczMjQzMA_size_16_color_FFFFFF_t_70 1][]**

**最终形式： 大盒子旋转180deg，小盒子跟着大盒子旋转然后展开。**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTczMjQzMA_size_16_color_FFFFFF_t_70 2][]**

**代码实现 **

**body模块：**

**CSS：**

body{
    			perspective:800px;
    		}
    		.stage{
    			position:relative;
    			width:200px;
    			height:200px;
    			margin:400px auto;
    			box-shadow:0 0 15px #000 inset;
    			transform-style:preserve-3d;
    			transition:2s;
    		}
    			/*注意：因为position，所有的transform都是相对于父级元素来变化，因此把父级元素设置为舞台。*/
    		.stage:hover{
    			transform:rotateY(180deg);
    		}
    		.stage:hover .face5{
    			transform:translateZ(100px) translateY(-200px);
    				
    		}
    		.stage:hover .small1{
    			transform:translateZ(100px) translateY(-300px);
    		}
    		.stage:hover .small2{
    			transform:rotateY(180deg) translateZ(100px) translateY(-300px);
    		}
    		.stage:hover .small3{
    			transform:rotateY(-90deg) translateZ(100px) translateY(-300px);
    		}
    		.stage:hover .small4{
    			transform:rotateY(90deg) translateZ(100px) translateY(-300px);
    		}
    		.stage:hover .small5{
    			transform:rotateX(90deg) translateZ(400px);
    		}
    		.stage:hover .small6{
    			transform:rotatex(-90deg) translateZ(-200px);
    		}
    		.face{
    			position:absolute;
    			width:200px;
    			height:200px;
    			box-shadow:0 0 20px #554ee9 inset;
    			transition:2s;
    		}
    		.small{
    			position:absolute;
    			right:50px;
    			bottom:0px;
    			width:100px;
    			height:100px;
    			box-shadow:0 0 5px #000 inset;
    			transition:2s;
    		}
    		.face1{
    			transform:translateZ(100px);
    		}
    		.face2{
    			transform:rotateY(180deg) translateZ(100px);
    		}
    		.face3{
    			transform:rotateY(-90deg) translateZ(100px);
    		}
    		.face4{
    			transform:rotateY(90deg) translateZ(100px);
    		}
    		.face5{
    			transform:rotateX(90deg) translateZ(100px);
    		}
    		.face6{
    			transform:rotatex(-90deg) translateZ(100px);
    		}
    		.small1{
    			transform:translateZ(50px);
    		}
    		.small2{
    			transform:rotateY(180deg) translateZ(50px);
    		}
    		.small3{
    			transform:rotateY(-90deg) translateZ(50px);
    		}
    		.small4{
    			transform:rotateY(90deg) translateZ(50px);
    		}
    		.small5{
    			transform:rotateX(90deg) translateZ(50px);
    		}
    		.small6{
    			transform:rotatex(-90deg) translateZ(50px);
    		}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTczMjQzMA_size_16_color_FFFFFF_t_70]: /images/20220405/97d9e89fed2943ce83c9d8f9a2cd2a26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTczMjQzMA_size_16_color_FFFFFF_t_70 1]: /images/20220405/132a8ed7830b465d95a6baf0e219fe2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTczMjQzMA_size_16_color_FFFFFF_t_70 2]: /images/20220405/03e7db446a0b4138aff877c1578703f5.png