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 基本用法可以参考文 ...
随机推荐
- 二、YARN
一.YARN 介绍 yarn 是下一代 MapReduce,即 MRv2,是在第一代 MapReduce 基础上演变而来的,主要是为了解决原始 Hadoop 扩展性较差,不支持多计算框架而提出的,通俗 ...
- git:error: Your local changes to the following files would be overwritten by merge:
最近用git在服务器.github.本地更新代码的时候,因为频繁修改偶尔出现这个错误 覆盖本地的代码: git stash git pull git stash pop 保留对服务器上的修改: git ...
- Ubuntu下配置Hyperledger Fabric环境
在win10系统的台式机上安装配置Hyperledger Fabric环境 安装Ubuntu 16.04 双系统 镜像下载地址:https://www.ubuntu.com/download/desk ...
- HDU 6047 贪心思维题
Maximum Sequence Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- Win10上禁用Device Guard以便运行VMware
Win10上每次大版本升级后,如果你试图运行VMware,都会提示如下的错误信息: “VMware Workstation 与 Device/Credential Guard 不兼容.在禁用 Devi ...
- sqoop-介绍及安装
1.sqoop概述 sqoop是Apache旗下一款hadoop和关系数据库服务器之间传送数据的工具: 核心的功能: 导入,迁入(从关系型数据库-->hdfs hive hbase) 导出,迁出 ...
- dede搜索页做法
触发搜索页代码 <p class="fl"> <span>热门搜索:</span> {dede:hotwords num=8 subday=36 ...
- idea的生成类注释和方法注释
sttings中选择 类注释 /** * @program: ${PROJECT_NAME} * * @description: ${description} * * @author: xiaozha ...
- 使用flask实现简单的文件上传
from flask import Flask, redirect, render_template, request, url_forfrom werkzeug.utils import secur ...
- 深入理解JS：执行上下文中的this（二）
目录 序言 Function.prototype.bind() 方法 箭头函数 参考 1.序言 在 深入理解JS:执行上下文中的this(一) 中,我们主要深入分析全局环境和函数环境中函数调用的 th ...