HTML连载69-透视属性以及其他属性练习

最新推荐文章于 2023-08-11 22:40:22 发布

睿里睿气

最新推荐文章于 2023-08-11 22:40:22 发布

阅读量285

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_44630050/article/details/104403490

版权

HTML 专栏收录该内容

86 篇文章 2 订阅

订阅专栏

一、透视属性
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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1IpVXpHa-1582128798600)(https://www.cnblogs.com/ruigege0000/p/12334018.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大数据学习视频礼包
69.1

睿里睿气

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML连载69-透视属性以及其他属性练习

一、透视属性1.什么是透视透视简单来说就是近大远小2.注意点：一定要注意，透视属性必须添加到需要呈现近大远小效果的元素的父元素。3.格式：perspective:数字px;这里的数字代表透视的大小距离。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫