使用CSS3backface-visibility属性制作3D翻转动画效果.zip资源-CSDN文库

共29个文件

svg：13个

css：7个

html：4个

版权申诉

前端代码

158 浏览量 2022-11-10 03:04:54 上传评论收藏 74KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

使用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

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

<!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" />  </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>

评论收藏

内容反馈

版权申诉