这是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. 最简单的git 用法

    步骤 在机器上ssh-keygen 然后把id_rsa.pub 复制到csdn 的公钥上去. git clone git@code.csdn.net:aca_jingru/zabbix.git 如果这 ...

  2. python机器学习（四）分类算法-决策树

      一.决策树的原理 决策树思想的来源非常朴素,程序设计中的条件分支结构就是if-then结构,最早的决策树就是利用这类结构分割数据的一种分类学习方法 . 二.决策树的现实案例 相亲   相亲决策树 ...

  3. webpack打包时修改package.json的版本号，并输出相关版本

    可直接修改的方式 { plugins: [ function() { // 修改package.json中的版本号 this.plugin('done', function() { const pkg ...

  4. MySQL银行ATM存取款机系统（需求分析）

    银行ATM需求文档 一．E-R图形文 二.开发步骤 1.明确需求--数据库设计--编码实现功能--测试 2.绘制e-r图--绘制数据库模型图--使用三大方式规范数据库结构 三．开发思路 1. 模型图综 ...

  5. SpringBoot整合Redis实现简单的set、get

    一.导入pom.xml文件相关的依赖并配置 <dependency> <groupId>org.springframework.boot</groupId> < ...

  6. 使用包时，报 xxx.default is not a function

     最近做了一个导出功能,代码如下 import request from 'request-promise-native'; export default class Form { // 导出 @po ...

  7. 【JVM】GC 可达性分析中哪些算是GC ROOT？

    至今为止,我基本上发现网上没有几个博客说的很明白的,今天我在这里斗胆总结一下,各位大佬,如有错误,还望指责 ^ _ ^ 首先那肯定还得是看看概念了,在JVM中,什么可以作为GC Root呢? 虚拟机栈 ...

  8. docker常用命令，及进入Tomcat的WebApps发布目录(就是进入docker容器后台目录)

    docker常用命令,及进入Tomcat的WebApps发布目录(就是进入docker容器后台目录)   一.常用命令 1.显示所有的容器,包括未运行的 docker ps -a   2.启动容器.注 ...

  9. 记一次 React Native 大版本升级过程——从0.40到0.59

    去年把公司几个react native 相关的项目升级了下,已经过去一段时间了,这里系统整理下之前的整个过程. 背景 之前到公司的时候发现公司用的还是0.40的版本,据了解,当时项目做的比较早,导航用 ...

  10. 解决mysql：ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)

    一.问题 有时候我们登录Mysql输入密码的时候,会出现这种情况 mysql -u root -p Enter Password > '密码' 错误:ERROR 1045 (28000): Ac ...