css3中transform属性,css3的transform属性

当你对一个元素进行了translateY(10px)操作，再对它进行rotateZ(45deg)操作，此时该元素的旋转中心却是以translateY之前的状态作为旋转中心，这是为什么？

* {margin: 0; padding: 0;}

.b {

width: 50px;

height: 50px;

/*border-radius: 50%;*/

background: #000;

position: relative;

};

ul {

width: 20px;

height: 20px;

/*background: #fff;*/

position: absolute;

top: 50%;

left: 50%;

margin-top: -10px;

margin-left: -10px;

}

li {

width: 20px;

height: 2px;

background: #fff;

position: absolute;

top: 50%;

margin-top: (-1px);

transform: translateY(3.75px);

transition: all 1s;

}

li:nth-child(2) {

transform: translateY(-3.75px);

}

var b = document.querySelector('.b');

var lis = document.querySelectorAll('li');

var bol = false;

b.addEventListener('click',function(){

bol = !bol;

if(bol) {

lis[0].style.transform = 'rotateZ(45deg)';

lis[1].style.transform = 'rotateZ(-45deg)';

} else {

lis[0].style.transform = 'rotateZ(0deg)';

lis[1].style.transform = 'rotateZ(0deg)';

}

})