CSS3——旋转方块

迷南。 2022-08-09 02:25 164阅读 0赞

#cube{
    	height: 200px;
    	width: 200px;
    	margin: auto;
    	-webkit-transform-style: preserve-3d;
    	-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    #f1{
    	height: 200px;
    	width: 200px;
    	background: #00ffcc;
    	position: absolute;
    	-webkit-backface-visibility: visible;
    	-webkit-transform: translateZ(100px);/*注意顺序，假如先进行了rotateX之类的，translate的方向会跟着变换*/
    }
    #f2{
    	height: 200px;
    	width: 200px;
    	background: #00aacc;
    	position: absolute;
    	-webkit-backface-visibility: visible;
    	-webkit-transform: translateZ(-100px);
    
    }
    
    #f3{
    	height: 200px;
    	width: 200px;
    	background: #00bfcc;
    	position: absolute;
    	-webkit-backface-visibility: visible;
    
    	-webkit-transform: rotateX(90deg) translateZ(100px);/*随着转动的变化，轴也在变化，但是x,y,z三个轴的垂直关系没有变，通过三者关系找移动*/
    
    }
    #f4{
    	height: 200px;
    	width: 200px;
    	background: #bbffcc;
    	position: absolute;
    	-webkit-backface-visibility: visible;
    	-webkit-transform: rotateX(90deg) translateZ(-100px);
    
    }
    
    #f5{
    	height: 200px;
    	width: 200px;
    	background: #00ffaa;
    	position: absolute;
    	-webkit-backface-visibility: visible;
    	-webkit-transform:rotateY(90deg) translateZ(100px);
    
    }
    #f6{
    	height: 200px;
    	width: 200px;
    	background: #00bbcc;
    	position: absolute;
    	-webkit-backface-visibility: visible;
    	-webkit-transform: rotateY(90deg) translateZ(-100px);
    
    }
    
    #cube{
    	-webkit-animation: rotatex 4s linear  infinite;
    	
    }
    #cube:hover{
    	-webkit-animation: rotatey 4s linear  infinite;
    }
    
    
    @-webkit-keyframes rotatex {
    	0%{-webkit-transform: rotateX(0);}
    	50%{-webkit-transform: rotateX(180deg);}
    	100%{-webkit-transform: rotateX(360deg);}
    }
    
    @-webkit-keyframes rotatey {
    	0%{-webkit-transform: rotateY(0);}
    	50%{-webkit-transform: rotateY(180deg);}
    	100%{-webkit-transform: rotateY(360deg);}
    }

跟着官方的Demo做了个六个面，主要是记录下自己开始对translateXYZ这三个函数的使用理解上有点问题，随着block转动后，对于这个block而言它的三个轴的方向也随之变化，使用哪个translate需要注意。