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

时间 2020-02-20

标签 html 连载属性以及其余练习栏目 HTML 繁體版

原文原文链接

1、透视属性html

1.什么是透视git

透视简单来讲就是近大远小github

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>

3、源码：ui

D171_PerspectiveAttribute.htmlspa

D172_PerspectiveExercise.html.net

地址:code

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大数据学习视频礼包