这是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. 「雕爷学编程」Arduino动手做（23）——矩形脉冲发生器

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...

  2. sound of the genuine

    “There is something in every one of you that waits and listens for the sound of the genuine in yours ...

  3. Struts2导图

  4. 点双连通分量F. Simple Cycles Edges

    F. Simple Cycles Edges time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  5. PAT-1135 Is It A Red-Black Tree（二叉查找树的创建和遍历）

    There is a kind of balanced binary search tree named red-black tree in the data structure. It has th ...

  6. HDU1160

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1160 题目大意:给出多个数据组(最多1000个),terminated by end of file, ...

  7. vue2.0 axios前后端数据处理

    目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据. 前言: 使用 cnpm 安装 axios cnpm install axios -S ...

  8. 【JAVA习题一】古典问题：有一对兔子，从出生后第3个月起每个月都生一对兔子，小兔子长到第三个月后每个月又生一 对兔子，假如兔子都不死，问每个月的兔子总数为多少？

    斐波那契函数:f(n)=f(n-1)+f(n-2); package XXXXX; import java.util.Scanner; public class Fbonaci斐波那契 { publi ...

  9. Excel中遇到的一些问题——持续更新

    Q1:excel2007表格里的数字在表格关闭后再打开经常会变成日期格式,怎么解决? A1: 1)打开Excel,选中任意单元格,单击鼠标右键,选择设置单元格格式2)在数字自定义类型中,找到类似[$- ...

  10. tomcat依赖--linux

    https://tomcat.apache.org/download-90.cgi 下载 3,解压到usr/locat/tomcat 创建usr/local/tomcat Mkdir /usr/loc ...