Html
    Css
    Js


* {
	margin:0;
	padding:0;
}
.box {
	position:relative;
	width:200px;
	height:200px;
	margin:300px auto;
	/* 開啟 3d 舞臺 */
        transform-style:preserve-3d;
	transition:all 2s ease;
}
.side {
	position:absolute;
	top:0;
	left:0;
	width:200px;
	height:200px;
	text-align:center;
	line-height:200px;
	font-size:36px;
	color:#ffffff;
	background:rgba(66,66,66,0.5);
}
/* 往左移動  寬度的一半 并按照 Y 軸旋轉 90度*/
      .left {
	transform:translateX(-100px) rotateY(90deg);
	background:rgba(57,57,107.5);
}
/* 往右移動 寬度的 一半 并按照 Y 軸旋轉 90度 */
      .right {
	transform:translateX(100px) rotateY(90deg);
	background:rgba(62,238,86,0.5);
}
/* 往上移動  寬度的一半 并按照 X 軸旋轉 90度*/
      .top {
	transform:translateY(-100px) rotateX(90deg);
	background:rgba(164,57,226,0.5);
}
/* 往下移動  寬度的一半 并按照 X 軸旋轉 90度*/
      .bottom {
	transform:translateY(100px) rotateX(90deg);
	background:rgba(212,214,53,0.5);
}
/* 往前移動  寬度的一半*/
      .before {
	transform:translateZ(100px);
	background:rgba(216,107,17,0.5);
}
/* 往后移動  寬度的一半*/
      .after {
	transform:translateZ(-100px);
	background:rgba(221,41,176,0.5);
}
/* 鼠標 放上去的時候 觸發旋轉 */
      .box:hover {
	cursor:pointer;
	transform:rotateX(360deg) rotateY(360deg);
}

↑上面代碼改變,會自動顯示代碼結果 jQuery調用版本:1.11.3
 立即下載

正方體旋轉小動畫

内蒙古十一选五的走势图百度乐彩网 www.cyiqh.com 更新時間:2019-12-23 09:48:12

首先準備六個平面, 根據父類進行定位,把六個平 面 依次 平鋪 根據 軸向不同在 旋轉 一定的 角度 進行 組合 .當鼠標 hover 的 時候 觸發
旋轉 . 注: 要開啟 3d 舞效果 否則 旋轉的時候 就是 平面 圖形 

0