一、透視屬性 1.什麼是透視 透視簡單來說就是近大遠小 2.註意點：一定要註意，透視屬性必須添加到需要呈現近大遠小效果的元素的父元素。 3.格式：perspective:數字px; 這裡的數字代表透視的大小距離。 <!DOCTYPE html> <html lang="en"> <head> ...
一、透視屬性
1.什麼是透視
透視簡單來說就是近大遠小
2.註意點：一定要註意，透視屬性必須添加到需要呈現近大遠小效果的元素的父元素。
3.格式：perspective:數字px;
這裡的數字代表透視的大小距離。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D172_PerspectiveExercise</title> <style> *{ margin:0px; padding:0px; } div{ width: 500px; height: 750px; border:1px solid black; margin:100px auto; background-color: skyblue; perspective: 500px; } div img{/*修改形變中心點，否則旋轉的中心不對*/ transform-origin:center bottom; transition:transform 1s; } div:hover img{ transform:rotateX(45deg); } </style> </head> <body> <div> <img src="image/play_tennis.jpg" alt=""> </div> </body> </html>
三、源碼：
D171_PerspectiveAttribute.html
D172_PerspectiveExercise.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D171_PerspectiveAttribute.html
https://github.com/ruigege66/HTML_learning/blob/master/D172_PerspectiveExercise.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號：傅里葉變換，個人賬號，僅用於技術交流，後臺回覆“禮包”獲取Java大數據學習視頻禮包
