zoukankan      html  css  js  c++  java
  • HTML连载69-透视属性以及其他属性练习

    一、透视属性

    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>
    
     

    三、源码:

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

     

  • 相关阅读:
    Python float() 函数
    Python bytearray() 函数
    scanner.nextInt()与scanner.nextDouble
    Scanner对象next与nextLine
    JavaDoc
    包机制
    运算符要点
    变量与常量
    test
    类型转换
  • 原文地址:https://www.cnblogs.com/ruigege0000/p/12334018.html
Copyright © 2011-2022 走看看