3D動畫案例
阿新 • • 發佈：2018-11-01
要點：
1.視距越大，看到的效果越小，跟小孔成像同樣的原理
2.給父元素新增透視，會作用於子元素
3.backface-visibility設定背向瀏覽器是否可見
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ perspective: 1000px; /*視距，數值越小代表離眼睛距離越小，顯示的效果越大*/ } div{ position: relative; margin: 300px auto; width: 350px; height: 350px; } div img{ position: absolute; top: 0; left: 0; transition: all 2s; } div:hover img{ transform: rotateY(180deg); /*同樣的單位也是角度*/ } div img:last-child{ backface-visibility: hidden; /*背向螢幕時，是否可見*/ } </style> </head> <body> <div> <img src="img/hou.svg"> <img src="img/qian.svg"> </div> </body> </html>
效果;
