<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用CSS3 backface-visibility属性制作翻转动画效果</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link type="text/css" rel="stylesheet" href="css/box.css" />
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>使用CSS3 backface-visibility属性制作翻转动画效果 - Donut Box<span>Using backface-visibility and CSS Animations</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="https://www.php.cn" title="PHP中文网" target="_blank"><span> PHP中文网</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="https://www.php.cn/xiazai/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
<div class="htmleaf-demo center">
<a href="index.html">Donut Spin</a>
<a href="coffee.html">Spilled Coffee</a>
<a href="door.html">Shop Door</a>
<a href="box.html" class="current">Donut Box</a>
</div>
</header>
<div class="contain">
<input type="checkbox" id="backface" />
<label for="backface">backface-visibility</label>
<div class="box">
<div class="face one">
<img class="box-demo enjoy" src="images/enjoy.svg" alt="Enjoy" />
</div>
<div class="face two">
<img class="box-demo" src="images/boxdonut.svg" alt="Donut" />
</div>
<div class="face three">
<img class="box-demo donut-text" src="images/boxdonuttext.svg" alt="Donut Text" />
</div>
<div class="face four">
<img class="box-demo" src="images/boxdonut.svg" alt="Donut" />
</div>
<div class="face five">
<img class="box-demo donut-text" src="images/boxdonuttext.svg" alt="Donut Text" />
</div>
<div class="face six">
<img class="box-demo" src="images/bottombox.svg" alt="Bar Code" />
</div>
</div>
</div>
</div>
</body>
</html>
使用CSS3 backface-visibility属性制作3D翻转动画效果.zip （29个子文件） 
132674316492543356 likecs.com_132674316497287904 css 
coffee.css 1011B nav.css 1KB default.css 6KB door.css 677B donut.css 492B box.css 2KB normalize.css 2KB related 
2.jpg 26KB 1.jpg 22KB images 
doorwindow.svg 12KB doorback.svg 2KB donutback.svg 668B cupfront.svg 4KB boxdonut.svg 4KB donutfront.svg 4KB bottombox.svg 2KB boxdonuttext.svg 16KB coffeedrip.svg 1KB enjoy.svg 6KB cupback.svg 1KB doorfront.svg 2KB
door.html 2KB fonts icomoon.woff 1KB icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB coffee.html 2KB index.html 2KB box.html 2KB资源评论
