做一个div翻转的小demo

大概就是实现一个 鼠标点击按下的时候 div 3d翻转180 度 正面是绿色 背面是红色

<div class="outNode">
	<div class="zm"></div>
	<div class="bm"></div>
</div>

// 样式文件
.outNode{
	width: 200px;
	height: 200px;
	position: absolute;
	left: calc(50% - 100px); // 注意  100px 和前面要有空格
	top:  calc(50% - 100px);
	transform: perspective(800px) rotateY(0deg);
	transition: .7s;
	transform-style: preserve-3d; // 让转换的子元素保留3D转换： 没有这个 达不到翻转的效果
}
.outNode:active{ // :active 表示鼠标 按下不松开
	transform:perspective(800px) rotateY(180deg);
}
.zm{
	width: 100%;
	height: 100%;
	background-color:#f00;
	position: absolute;
	left: 0;
	top: 0;
	transform: translateZ(1px); // 调整z轴的 距离
}
.bm{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #0f0;
	transform: translateZ(-1px);
}

ransform: perspective； 仅仅是谷歌和苹果浏览器支持
感兴趣 的童鞋可以深入了解下哈
生活那么苦,为啥不给自己一颗糖吃呢！坚持下去!你会看到不一样的风景！加油 奥利给！