css33D效果转换

css33D效果转换

博客原地址https://xgs888.top/post/view?id=65

效果可以在线预览  https://xgs888.top/test/index

	
	
		*{padding: 0;margin: 0}
		.box{width: 1100px;height: 500px;border: 3px solid red;}
		.box .block{width: 300px;height: 200px;float: left;
		margin: 10px;position: relative;-webkit-perspective: 300px;
		perspective: 300px}
		.box .block img{width: 300px;height: 200px;}
		.box .block .text{width: 300px;height: 200px;
		background: #fff;color: red;text-align: center;
		line-height: 200px;font-size: 18px;position: absolute;top: 0;
		-webkit-transform: rotateX(90deg);transform: rotateX(90deg);
		-webkit-transition: 2s;-o-transition: 2s;transition: 2s}
		.box .block:hover .text{-webkit-transform: rotateX(0deg);
		transform: rotateX(0deg);}
	




	
		
		刘亦菲

刘亦菲

刘亦菲