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>