51rgb-css3动画11-css3实现3D翻牌效果

分享 :

网盘下载链接:

提取密码: u4qi
复制提取密码
51RGB在线教育,WEB前端开发直播体验课,css3实现3D翻牌效果!源码下载
  • 详情
    文件来源

    官方发布

    更新日期

    2018-01-26

    适用平台

    All

    系统位数

    ALL

    文件格式

    zip

    文件语言

    中文

    文件授权

    免费

    下载次数

    484次

    源码,可以直接复制使用!

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<style type="text/css">
    		body {
    			background: #eeeeee;
    		}
    		
    		h3 {
    			color: red;
    			text-align: center;
    			font: bold 18px/1.5 "microsoft yahei";
    		}
    		
    		.card-container {
    			position: relative;
    			width: 1100px;
    			margin: 0 auto;
    		}
    		
    		.card {
    			margin-right: 15px;
    			width: 200px;
    			height: 380px;
    			float: left;
    		}
    		
    		.card .font,
    		.card .back {
    			position: absolute;
    			transition: transform 0.4s;
    			transform-style: preserve-3d;
    			-webkit-transform-style: preserve-3d;
    			backface-visibility: hidden;
    			-webkit-backface-visibility: hidden;
    			-moz-backface-visibility: hidden;
    			-ms-backface-visibility: hidden;
    		}
    		
    		.card .font {
    			-webkit-transform: rotateY( 0deg);
    			-moz-transform: rotateY( 0deg);
    			-o-transform: rotateY( 0deg);
    			transform: rotateY( 0deg);
    		}
    		
    		.card .back {
    			-webkit-transform: rotateY( -180deg);
    			-moz-transform: rotateY( -180deg);
    			-o-transform: rotateY( -180deg);
    			transform: rotateY( -180deg);
    		}
    		
    		.card:hover .font {
    			-webkit-transform: rotateY( 180deg);
    			-moz-transform: rotateY( 180deg);
    			-o-transform: rotateY( 180deg);
    			transform: rotateY( 180deg);
    		}
    		
    		.card:hover .back {
    			-webkit-transform: rotateY( 0deg);
    			-moz-transform: rotateY( 0deg);
    			-o-transform: rotateY( 0deg);
    			transform: rotateY( 0deg);
    		}
    		
    		.card2,
    		.card4 {
    			margin-top: 20px;
    		}
    	</style>
    
    	<body>
    		<h3>鼠标移动到卡片上试试</h3>
    		<div class="card-container">
    			<div class="card card1">
    				<a href="#" class="back"><img src="http://9yin.woniu.com/static/web201588/images/card6-back.png" /></a>
    				<a href="#" class="font"><img src="http://9yin.woniu.com/static/web201588/images/card6.png" /></a>
    			</div>
    			<div class="card card2">
    				<a href="#" class="back"><img src="http://9yin.woniu.com/static/web201588/images/card7-back.png" /></a>
    				<a href="#" class="font"><img src="http://9yin.woniu.com/static/web201588/images/card7.png" /></a>
    			</div>
    			<div class="card card3">
    				<a href="#" class="back"><img src="http://9yin.woniu.com/static/web201588/images/card8-back.png" /></a>
    				<a href="#" class="font"><img src="http://9yin.woniu.com/static/web201588/images/card8.png" /></a>
    			</div>
    			<div class="card card4">
    				<a href="#" class="back"><img src="http://9yin.woniu.com/static/web201588/images/card9-back.png" /></a>
    				<a href="#" class="font"><img src="http://9yin.woniu.com/static/web201588/images/card9.png" /></a>
    			</div>
    			<div class="card card5">
    				<a href="#" class="back"><img src="http://9yin.woniu.com/static/web201588/images/card10-back.png" /></a>
    				<a href="#" class="font"><img src="http://9yin.woniu.com/static/web201588/images/card10.png" /></a>
    			</div>
    		</div>
    	</body>
    
    </html>
    
  • 使用说明

    本节课视频资源:

    课程在线回放地址:http://www.51rgb.cn/video/page-29/214.html

    关注微信公众号:网页设计自学平台 回复:【css3动画】关键字即可获取全套css3动画教程及源码

  • 相关下载
在线客服
热线电话

微信公众账号