css3中的skew(skewX,skewY)用法
这是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)用法的更多相关文章
- 不可不看！CSS3中三十一种选择器用法
原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2012 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...
- CSS3中的skew（）属性
刚开始接触CSS3的2D变换属性,就被这个skew()搞的一头雾水,不知道具体是怎么变化的! 研究了一会才发现,CSS3的斜切坐标系和数学中的坐标系完全不一样(设置斜切原点为左上角) <styl ...
- CSS3中动画transform必须要了解的Skew变化原理
transform是CSS3中比较安全的动画(对于性能来说),其中有一些动画属性,来执行不同的变化.今天我们来了解skew的变化原理. skew,其实使用的频率不是很高,当然也没有最低.但是往往,一直 ...
- CSS3中transform属性的用法
有时候网站也要愚弄一下访客,比如愚人节.下面我给大家推荐个效果,就是整个页面左右颠倒了.css3 很强大,简单的几行代码就可以帮我们实现这个效果. view source print? 01 &l ...
- css3中user-select的用法详解
css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...
- css3属性中background-clip与background-origin的用法释疑
困惑在哪里? background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border.padding.content 三种 ...
- css3中font-face属性的用法详解
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- CSS3中transform几个属性值的注意点
transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文 ...
随机推荐
- node响应头缓存设置
我把react项目分成4个板块,在路由的顶层 今天在手机上打开react项目的时候,发现平级路由跳转时某一个图片较多的板块图片总是渲染得很慢,这分明是重新发起请求了. 然后我先查一下react-rou ...
- String，StringBuffer，StringBuilder三者的区别
相同点: String,StringBuffer,StringBuilder,都是final类,不允许被继承,在本质上都是字符数组, 不同点: 1.String的长度是不可变的而后两者长度可变,在进行 ...
- 迟早要知道的JS系列之常用数组方法
常用数组方法 一.不会改变原始数组的方法: 即访问方法,下面的这些方法绝对不会改变调用它们的对象的值,只会返回一个新的数组或者返回一个其它的期望值. 1. concat() ** 语法:** Java ...
- Centos慢慢长大（一）
1.写在前面 这将是一个系列性的文章.可能更多的是记录我在学习的过程中的一些感悟吧.我想强调的是在这一系列文章里我会从最小化的安装开始,然后逐渐的增加需要安装的软件.就象一个婴儿的诞生,慢慢的学走路. ...
- A + B Problem（hdu1000）
注意,认真读题目的Input要求,看看是输入一组测试数据还是输入多组测试数据.输入多组数据,不要忘记while(). #include<iostream> using namespace ...
- 好用的python性能测试神器–Locust
原文链接:https://mp.weixin.qq.com/s/9PxSPuHmucSLi_welq6uNQ 现在性能测试工具太多,根据业务不同使用,比如说我们熟悉的loadrunner.jmeter ...
- 技术大佬：我去，你竟然还不会用 this 关键字
上一篇文章写的是 Spring Boot 的入门,结果有读者留言说,Java 都还没搞完,搞什么 Spring Boot,唬得我一愣一愣的.那这篇就继续来搞 Java,推出广受好评的我去系列第四集:你 ...
- 聊聊UDP、TCP和实现一个简单的JAVA UDP小Demo
最近真的比较忙,很久就想写了,可是一直苦于写点什么,今天脑袋灵光一闪,觉得自己再UDP方面还有些不了解的地方,所以要给自己扫盲. 好了,咱们进入今天的主题,先列一下提纲: 1. UDP是什么,UDP适 ...
- 手机端页面访问PC页面自动跳手机端代码
<script> var mobileAgent = new Array("iphone", "ipod", "ipad", & ...
- 第4章 最基础的分类算法-k近邻算法
思想极度简单 应用数学知识少 效果好(缺点?) 可以解释机器学习算法使用过程中的很多细节问题 更完整的刻画机器学习应用的流程 distances = [] for x_train in X_train ...