这是html代码

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>index</title>

	<link href="index.css" rel="stylesheet" type="text/css">

</head>

<body>

	<div>

		<p>这是一段文字。</p>

	</div>

	<div id="div2">

		<p>这是一段文字。</p>

	</div>

</body>

</html>

这是css代码

div{

	background-color: green;

	width:150px;

	height:150px;

}

div p{

	text-align: center;

	line-height: 150px;

	color:white;

}

#div2:hover{

	transform: skew(0deg,30deg);

}

skewY是相对于Y轴的倾斜，Y轴在这里是指水平方向

示例：

skew(0deg,30deg)，图形在Y方向长度不变，X方向的长度变为tan(30)*length(Y)，中心点位置不变。

css3中的skew(skewX,skewY)用法的更多相关文章

  1. 不可不看！CSS3中三十一种选择器用法

    原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2012 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...

  2. CSS3中的skew（）属性

    刚开始接触CSS3的2D变换属性,就被这个skew()搞的一头雾水,不知道具体是怎么变化的! 研究了一会才发现,CSS3的斜切坐标系和数学中的坐标系完全不一样(设置斜切原点为左上角) <styl ...

  3. CSS3中动画transform必须要了解的Skew变化原理

    transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理. skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直 ...

  4. CSS3中transform属性的用法

    有时候网站也要愚弄一下访客,比如愚人节.下面我给大家推荐个效果,就是整个页面左右颠倒了.css3 很强大,简单的几行代码就可以帮我们实现这个效果. view source   print? 01 &l ...

  5. css3中user-select的用法详解

    css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...

  6. css3属性中background-clip与background-origin的用法释疑

    困惑在哪里? background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border.padding.content 三种 ...

  7. css3中font-face属性的用法详解

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  8. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  9. CSS3中transform几个属性值的注意点

    transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...

随机推荐

  1. 学习Echarts：（一）静态图表

    Echarts是现在比较火的js图表库,官网有丰富的实例和友好的入门教程.但是图表的种类很多,配置项的参数也很多,一开始我根据图表类型翻看配置项,发现这样学效率太低了,决定先制定一个简单的学习步骤,按 ...

  2. String，StringBuffer，StringBuilder三者的区别

    相同点: String,StringBuffer,StringBuilder,都是final类,不允许被继承,在本质上都是字符数组, 不同点: 1.String的长度是不可变的而后两者长度可变,在进行 ...

  3. reids不重启切换rdb到aof

    reids不重启切换rdb到aof

  4. 第七篇：wed版语音机器人

    wed版语音机器人: GitHub项目地址:https://github.com/Yang915/WebToy 特别说明:该项目在本机测试,通过浏览器调用系统麦克风(https请求),实际环境在Fir ...

  5. k8s搭建实操记录一(master)

    #1)关闭CentOS7自带的防火墙服务 systemctl disable firewalld systemctl stop firewalld swapoff  -a     ##虚拟机要关闭交换 ...

  6. DPDK开发环境搭建（学会了步骤适合各版本）

    一.版本的选择 首先要说明的是,对于生产来说DPDK版本不是越高越好,如何选择合适的版本? 1.要选择长期支持的版本LTS(Long Term Support) 2.根据当前开发的系统环境选择 可以在 ...

  7. 谈谈C#中各种线程的使用及注意项~

    说到线程,很多人会想到timer吧, 接下来我们就来学习一下 timer 吧,摇摇脑袋,清醒一下,接下来开始学习.... 一.基本概念 1.什么是进程?        当一个程序开始运行时,它就是一个 ...

  8. python运用 - log信息提取（知识： 遍历 | os ）

    运用到的python知识点: excel相关:https://www.cnblogs.com/yaner2018/p/11269873.html 字典: python字典的几种方式: 1)key值遍历 ...

  9. 405 - 不允许用于访问此页的 HTTP 谓词的处理办法

    今天介绍的是针对访问html页面时出现此类错误的处理办法,如果你的问题页面是其他类型,可以参考如下信息: IIS 返回 405 - 不允许用于访问此页的 HTTP 谓词.终极解决办法!!!! 1.为什 ...

  10. Kubernetes Dashborad 搭建

    需求 基于网页查看Kubernetes 用户管理界面 安装步骤 在控制面板节点部署dashborad kubectl apply -f https://raw.githubusercontent.co ...