欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

做一个div翻转的小demo

程序员文章站 2022-07-07 14:06:53
...

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

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

相关标签: css3