CSS實現正方形翻轉的步驟如下：

1、創(chuàng)建一個正方形元素，在HTML中，可以使用div元素來創(chuàng)建一個正方形。

<div id="square"></div>

2、設置正方形的樣式，在CSS中，可以設置正方形的寬度、高度、背景顏色等樣式。

#square {
  width: 100px;
  height: 100px;
  background-color: #000;
}

3、使用CSS3的transform屬性來實現正方形的翻轉，使用rotateY函數可以讓正方形沿著Y軸旋轉，從而實現翻轉效果：

#square {
  transform: rotateY(180deg);
}

4、可以添加過渡效果來使翻轉更加平滑，使用transition屬性可以添加過渡效果：

#square {
  transition: transform 2s;
}

5、可以通過JavaScript來控制翻轉動作的執(zhí)行，可以使用addEventListener來監(jiān)聽某個事件，并在該事件發(fā)生時執(zhí)行翻轉動作：

var square = document.getElementById('square');
square.addEventListener('click', function() {
  square.style.transform = 'rotateY(180deg)';
});

通過以上步驟，就可以使用CSS和JavaScript來實現正方形的翻轉效果了。