一、透视属性
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大数据学习视频礼包