HTML中用CSS实现图片与内容前后翻转动画效果

最新推荐文章于 2024-05-15 10:35:35 发布

一米阳光里的晴天娃娃

最新推荐文章于 2024-05-15 10:35:35 发布

阅读量9.6k

点赞数 5

分类专栏： html编写网页常用功能代码文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_39431596/article/details/77863203

版权

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.center{  
			    width: 72%;  
			    height: 300px;  
			    margin: 3.75rem auto;  
			    text-align: center;  
			}  
			.center>.list{  
			    list-style: none;  
			}  
			.center>.list>.inline-list{  
			    float: left;  
			    width: 33%;  
			    height: 300px;  
			    border: 1px solid #F3F3F3;  
			    border-radius: 5px;  
			    position: relative;  
			    transition: 0.5s;  
			    transform-style: preserve-3d;  
			}  
			.center>.list>.inline-list>.front{  
			    color: #2E9AF4;  
			    font-size: 2rem;  
			    width: 100%;  
			    height: 300px;  
			    line-height: 300px;  
			    border-radius: 5px;  
			    background-color: #F4F4F4;  
			    float: l