一、透视属性

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

HTML连载69-透视属性以及其他属性练习的更多相关文章

  1. Bean熟悉替换，只替换部分属性，其他属性值不改变

    Bean熟悉替换,只替换部分属性,其他属性值不改变 需要加入:asm.jar  cglib-2.1.jar,用来map和bean之间的转换(比spring和反射的效率好,因为加入了缓存) packag ...

  2. 第六十八节，htnl全局属性和其他属性

    htnl全局属性和其他属性 学习要点: 1.实体 2.元数据 3.全局属性 本章主要探讨HTML5中的HTML实体.以及HTML核心构成的元数据,最后了解一下HTML中的全局属性. 一．实体 HTML ...

  3. HTML连载15-文本属性&颜色控制属性

    一.文本装饰的属性 1.格式:text-decoration:underline; 2.取值: (1)underline代表下划线 (2)line-through代表删除线 (3)overline代表 ...

  4. HTML连载14-文字属性补充&简写

    一.字体属性(补充) 1.如果设置的字体不存在,那么系统会使用默认的字体来显示宋体. font-family:"瞎写的一个字体"; 2.如果设置的字体不存在,而我们又不想用默认的字 ...

  5. HTML连载37-边框属性（下）、边框练习

    一.边框属性 1.连写(分别设置四条边的边框) border-width:上 右 下 左: border-style:上 右 下 左: border-color:上 右 下 左: 注意点: (1)这三 ...

  6. ExtJs控件属性配置详细

    序言:    1.本文摘自网络,看控件命名像是4.0以前的版本,但控件属性配置仍然可以借鉴(不足之处,以后项目用到时再续完善). Ext.form.TimeField: 配置项:            ...

  7. KnockoutJS 3.X API 第三章 计算监控属性(5) 参考手册

    计算监控属性构造参考 计算监控属性可使用以下形式进行构造: ko.computed( evaluator [, targetObject, options] ) - 这种形式是创建一个计算监控属性最常 ...

  8. html5新增及废除属性

    html5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 一.新增属性 1.表单属性 a.autofocus 对input[所有类型].select.textarea与button指定au ...

  9. Extjs 属性控件[转载]

    Ext.form.TimeField: 配置项:            maxValue:列表中允许的最大时间            maxText:当时间大于最大值时的错误提示信息          ...

随机推荐

  1. [bzoj4567] [loj#2012] [SCOI2016] 背单词

    Description \(Lweb\) 面对如山的英语单词,陷入了深深的沉思,「我怎么样才能快点学完,然后去玩三国杀呢?」.这时候睿智的凤老师从远处飘来,他送给了 \(Lweb\) 一本计划册和一大 ...

  2. 记录 解决ubuntu16.04 ‘E: 无法获得锁 /var/lib/dpkg/lock-frontend - open (11: 资源暂时不可用) ’

    当运行sudo apt-get install/update/其他命令时,会出现如下提示: E: 无法获得锁 /var/lib/dpkg/lock-frontend - open (11: 资源暂时不 ...

  3. c#数字图像处理（四）线性点运算

    灰度图像的点运算可分为线性点运算和非线性点运算两种.4.1线性点运算定义线性点运算就是输出灰度级与输入灰度级呈线性关系的点运算.在这种情况下,灰度变换函数的形式为: g(x, y)=pf(x,y)+L ...

  4. ssh隧道使用

    在内网中几乎所有的linux服务器和网络设备都支持ssh协议.一般情况下,ssh协议是允许通过防火墙和边界设备的,所以经常被攻击者利用.同时ssh协议的传输过程是加密的,所以我们很难区分合法的ssh会 ...

  5. [SDOI2011]染色（树链剖分）

    [SDOI2011]染色(luogu) Description 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段 ...

  6. 关于MySQL5.6配置文件my-default.ini不生效问题

    一.问题描述 首先,由于工作要求,需使用MySQL5.6版本(绿色版),从解压到修改root密码,一切都很顺利,但是在我要修改mysql的最大连接数的时候,出现问题了,配置不生效.完蛋.还好有万能的百 ...

  7. day05【数组】

    day05[数组] 1.数组 概念:是一种容器,可以同时存放多个数据. 特点: 数组是一种引用数据类型 数组当中的多个数据,类型必须统一 数组的长度在程序的运行期间不可改变 初始化:在内存当中创建一个 ...

  8. Mybatisplus代码生成器主类CodeGenerator配置

    //代码自动生成public class CodeGenerator { /** * <p> * 读取控制台内容 * </p> */ public static String ...

  9. Dubbo（二）：深入理解Dubbo的服务发现SPI机制

    一.前言 用到微服务就不得不来谈谈服务发现的话题.通俗的来说,就是在提供服务方把服务注册到注册中心,并且告诉服务消费方现在已经存在了这个服务.那么里面的细节到底是怎么通过代码实现的呢,现在我们来看看D ...

  10. python写的用WMI检测windows系统信息的脚本

    脚本如下: #!/usr/bin/env python #coding:utf- import wmi import sys,time,platform def get_system_info(os) ...