CSS3中提供了很多迷人的样式，如3D旋转效果。3D旋转可以让元素在3D空间内展开，并产生翻转的效果。下面是3D旋转的CSS代码：

/* 元素默认状态 */
.box {
width: 200px;
height: 200px;
background-color: #ccc;
transform-style: preserve-3d;
transition: transform 1s ease;
}
/* 翻转动画 */
.box:hover {
transform: rotateY(180deg);
}

首先，元素需要设置一个默认状态，并开启3D渲染模式。我们要控制元素的翻转，所以需要给元素设置一个过渡效果。这个过渡效果会在翻转时起作用。

在翻转状态下，我们可以使用transform: rotateY(180deg);命令来翻转元素。其中rotateY值可以控制翻转的轴点与方向。

通过这段简单的代码，我们可以实现一个3D翻转的效果。这种效果可以应用于很多场景，如卡片翻转、图片展开等。