CSS3 transform 属性
CSS3 transform 属性
语法：
| 值 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
| scale(x[,y]?) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
eg：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例子</title>
<style>
div
{
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello</div>
</body>
</html>
CSS3 transform 属性的更多相关文章
- 【CSS3 transform属性和过渡属性详解】
CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...
- css3 transform属性多值的顺序问题
对于transform属性的多值的顺序问题,我自己就被困扰过.后来知道了跟顺序有关,但是不知道为什么.我想应该很多人跟我以前一样,知其然不知其所以然.如果不知道的,也许这篇文章会对大家有所帮助. 先来 ...
- CSS3 transform属性
说明: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行移动(translate).旋转(rotate).缩放(scale)或倾斜(skew) transition属 ...
- CSS3 transform 属性(2D,3D旋转)
一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...
- CSS3 transform 属性详解(skew, rotate, translate, scale)
写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...
- 商品标签例子——CSS3 transform 属性
积累很重要.从此开始记录前端生涯的点滴.... <!DOCTYPE html><html lang="en"><head> <meta c ...
- CSS3 transform 属性 旋转 div 元素
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...
- 自己做得一个用于直观观察css3 transform属性中的rotate 3D效果
这段代码还是非常简单,是看了一个老师的视频受的启发,也是调用了很多个函数,所以比较杂乱吧! <!DOCTYPE html><html lang="en">& ...
- CSS3 transform rotate（旋转）锯齿的解决办法
-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...
随机推荐
- [k8s]一些技巧性的yaml和dockerfile-docker学习思路
我会把一些dockerfile和yaml的技巧性东西不定期搜集到这里 docker学习思路 三部曲: 1,vm会搭建服务 2,docker会跑服务 3,k8s集群会调度该服务 存储 vm1 vm2 共 ...
- python工具 - 批量文件重命名
日常工作中经常会遇到这样的情况,需要将某个文件夹下的文件按着一定的规则进行重命名,当文件数量及其庞大的时候手工一个一个的去修需要耗费大量的时间,以下python工具可以协助批量修改文件名. 场景:某文 ...
- stm32+rx8025
// 设备读写地址 #define RX8025_ADDR_READ 0x65 #define RX8025_ADDR_WRITE ...
- CentOS 添加 Oracle YUM 源
最新文章:Virson's Blog 文章来自:Oracle 官方 YUM 源 Introduction The Oracle public yum server offers a free and ...
- Kiss MySQL goodbye for development and say hello to HSQLDB
The days of using MySQL, DB2, PostgreSQL etc for development is over.. I don’t know why any program ...
- RedHat Linux7.3 使用yum安装时报错，改用CentOS yum源
在使用redhat linux的yum来安装或者更新软件的时候会有如下提示: [root@node1 home]# yum install package_name Loaded plugins: p ...
- spring boot 2整合swagger-ui
1.添加mvn依赖 修改pom.xml加入 <dependency> <groupId>io.springfox</groupId> <artifactId& ...
- [IR] Advanced XML Compression - XBW
思考:与ISX对比后能得出什么结论 原理解析: We proposed the XBW-transform that mimics on trees the nice structural prope ...
- 8 -- 深入使用Spring -- 6...1 Spring支持的事务策略
8.6.1 Spring支持的事务策略 JTA.JDBC.Hibernate Java EE应用的传统事务有两种策略:全局事务和局部事务.全局事务由应用服务器管理,需要底层服务器的JTA(Java T ...
- php 公历阴历互相转换
<?php /** * Created by PhpStorm. * User: timeless * Date: 17-3-9 * Time: 上午9:32 */ class Lunar { ...