CSS3中提供了许多3D效果,其中最常见的就是3D轮转了。3D轮转可以给网站带来更加活泼和生动的效果,让用户在浏览的时候感到更加愉悦。
.Box { width: 200px; height: 200px; margin: 50px auto; border: 1px solid #ccc; perspective: 800px; } .Box:hover { transform: rotate3d(1,1,360deg); transition: all 1s ease-in-out; }
首先,需要给需要轮转的元素设置透视属性。透视属性决定了轮转的视角,值越大则视角越远,变化越微小。在上述代码中,透视属性被设置成了800px,可以根据需要自行调整。
然后,给需要轮转的元素设置鼠标悬停事件,并在事件中设置transform属性。其中,rotate3d()函数可以让元素绕着指定轴旋转。参数1,2和3分别为x、y、z轴的旋转角度,参数4为旋转的角度,上述代码中设置为360deg,表示旋转一圈。