CSS的六邊形旋轉技巧可以用于很多設計和動畫中。它非常有趣和實用，可以在你的網站上創建重要的視覺效果。下面是一個展示如何創建并從中心點旋轉Codepen中的六邊形。我們需要利用CSS3的transform屬性。

.hexagon {
position: relative;
width: 100px;
height: 55px;
background-color: #6c3;
margin: 27.5px 0;
float: left;
margin-right: -50px;
margin-left: 6px;
transform: rotate(120deg);
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 27.5px solid #6c3;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 27.5px solid #6c3;
}

首先，我們設置一個HTML元素的類名為"hexagon"。我們使用了一些CSS屬性來創建出一個簡單的六邊形形狀。"width"和"height"屬性指定一個寬為100像素和高為55像素的盒子。"background-color"屬性設置它的顏色為#6c3，使其呈現出一種綠色。"margin"和"float"屬性將六邊形定位于其父元素中。

我們還使用了CSS的transform屬性來讓六邊形順時針旋轉120度，讓它處于一個合適的位置。

接著，我們使用CSS的":before"偽元素來創建出六邊形上半部分。我們設置該元素的"position"為"absolute"，寬度為0，"border-left"和"border-right"屬性分別為50像素的掛鉤空白，然后我們添加一個下邊框，使其呈現為綠色。我們還將其"bottom"屬性設置為"100%"，確保它始終與六邊形上半部分的底部對齊。

接下來，我們使用CSS的":after"偽元素來創建透明的一個三角形，它將被用于六邊形下半部分。我們設置該元素的"position"為"absolute"，上邊距為"100%"，邊框上方為27.5像素，左右邊框為空白。我們還設置該元素的"width"為0，確保它是透明的。然后我們添加上邊框，以及綠色的顏色，使其呈現出適當的形狀。

最后我們得到了一個六邊形，它會從中心點順時針旋轉120度。通過改變"transform"屬性的值，我們可以改變六邊形的位置和旋轉角度。無論如何，這使我們能夠在網站設計中實現一些有趣的效果。