transform属性和transition过渡属性,结合jQuery代码实现翻转功能。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset= ...
transform属性和transition过渡属性,结合jQuery代码实现翻转功能。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3d翻转相册</title> 6 <script src='/images/loading.gif' data-original="jquery-3.0.0.min.js"></script> 7 <style> 8 .container { 9 position: relative; 10 width: 560px; 11 height: 380px; 12 margin: 0 auto; 13 } 14 .items { 15 height: 100%; 16 margin: 100px auto; 17 transform-style: preserve-3d; 18 /*实现自动翻转效果,这里只设置翻转一次*/ 19 animation: autoMove 3s 1 linear; 20 /*点击翻转 过渡效果*/ 21 transition: all 0.5s; 22 } 23 .item { 24 width: 100%; 25 height: 100%; 26 position: absolute; 27 border: 1px solid #c18;
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:CSS3——3D翻转相册
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。