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

时间：2020-02-20 00:45:46 阅读：90 评论：0 收藏：0 [点我收藏+]

一、透视属性

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>