CSS3是一種前端開發技術,能夠實現很多高級的效果,如立體旋轉。下面就是一個使用CSS3實現的立體旋轉的例子。
/*定義一個旋轉效果*/ .rotate{ transform:rotateY(180deg); transition: all 1s ease; } /*定義一個鼠標懸停效果*/ .rotate:hover{ transform:rotateY(360deg); transition: all 1s ease; } /*定義旋轉的容器*/ .main{ width:300px; height:300px; margin:0 auto; perspective:500px; /*添加透視效果*/ } /*定義旋轉的面*/ .box{ width:100%; height:100%; position:relative; transform-style:preserve-3d; box-shadow: 0 0 50px rgba(0,0,0,0.2) /*添加陰影效果*/ } /*將不需要旋轉的面設置成不可見*/ .front,.back{ position:absolute; width:100%; height:100%; top:0; left:0; background-color:#ff0000; backface-visibility:hidden; } /*將需要旋轉的面設置成可見*/ .front{ transform:rotateY(0deg); } .back{ transform:rotateY(180deg); }
以上就是一個使用CSS3實現的立體旋轉的例子。此處定義了一個旋轉效果以及鼠標懸停效果,并分別應用于兩個面。在容器中添加了透視效果,并讓面在3D空間中保留其形狀。使用box-shadow屬性為面添加陰影效果。
上一篇css3元素輪流