preserve-3d on a div on rotating hover on 'a' elements not working

Question

I have created a div and used "transform-style: preserve-3d;perspective: 900px;" .box2 will be rotated 180deg and on hover .box1 will rotate 180deg and .box2 will