当前位置：首页 > 网络编程 > CSS/HTML > 详细页面

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

时间：2020-02-20来源：系统城装机大师作者：电脑系统城

一、透视属性

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>