CSS3 变形记
CSS3 变形
CSS3变形是一些效果的集合，比如平移，旋转，缩放和倾斜效果，每个效果都称为变形函数。
transform
transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform:none | <transform-function> [<transform-function>] *
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width:100px;
height:100px;
margin:40px;
position:absolute;
opacity:1;
background:rgb(0, 148, 255);
}
.box2{
background:rgb(0, 148, 255);
opacity:.5;
/*旋转45度*/
transform:rotate(45deg);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
旋转
缩放
.box2{
...
/*放大了1.5倍*/
transform:scale(1.5);
}
位移
.box2{
...
/*X轴与Y轴都移动150px*/
transform:translate(150px,150px);
}
倾斜
.box2{
...
/*X轴倾斜30度*/
transform:skew(30deg);
}
transform-origin
用来指定元素的中心点位置。
transform-origin:x-axis y-axis z-axis
transform进行变形时，默认是以元素自己中心点为原点进行变形的。通过transform-origin属性可以改变元素的中心点，从而以我们指定的点为中心点进行变形。
.box2{
...
transform-origin:left top;
}
上例中，元素的中心点从默认的中间点center改为左上角点left top。就是说以左上角的点为基点进行变形。很简单吧，其他位置的点俺就不一一示范了，另外transform-origin不能改变translate的中点。
transform-style
transform-style属性规定如何在3D空间中呈现被嵌套的元素。
transform-style:flat | preserver-3d
简单来说，就是能够创建一个3D空间。让子元素在3D空间中变形。
perspective
perspective 属性用来设置用户和元素3D空间Z平面之间的距离。值越小，3D效果越明显。
perspective:none | number
当元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D平面中。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*没有添加perspective时效果*/
#box1 div{
position:absolute;
}
#box1 div img{
transform-origin:bottom;
}
#box1 .box1-1 img{
opacity:.5;
}
#box1 .box1-2 img{
transform:rotateX(45deg);
}
/*添加perspective时效果*/
#box2 div{
position:absolute;
left:400px;
perspective:500px;
}
#box2 div img{
transform-origin:bottom;
}
#box2 .box2-1 img{
opacity:.5;
}
#box2 .box2-2 img{
transform:rotateX(45deg);
}
</style>
</head>
<body>
<div id="box1">
<div class="box1-1"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div>
<div class="box1-2"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div>
</div>
<div id="box2">
<div class="box2-1"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div>
<div class="box2-2"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div>
</div>
</body>
</html>
可见，设置了perspective的元素，其3D效果更加明显了。
另外，在3D变形中，除了perspective属性可以激活一个3D空间之外，在3D变形的函数中的perspective()也可以激活3D空间。不同的是，perspective属性用在父元素中，perspective()函数用在当前的子元素中，并且与transform中的其他的函数一起使用。如：
transform:rotate(45deg) perspective(500px);
其效果是一样的。
perspective-origin
用来决定perspective属性的起点位置就，简单说就是观看的视角。
perspective-origin: x-axis y-axis;
perspective-origin与perspective属性一样，必须定义在父元素的元素上。换句话说，perspective-origin是与perspective结合使用的。
#box2 div{
...
perspective-origin:bottom right;
}
右下角效果
左下角效果
左上角效果
右上角效果
上角效果
右角效果
下角效果
左角效果
默认值，中角。
backface-visibility
backface-visibility属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到背面时，该属性很有用。
backface-visibility:visible | hidden;
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
@keyframes rotate{
0%{
transform:rotateY(0deg);
}
100%{
transform:rotateY(360deg);
}
}
#box1,#box2{
width:300px;
height:400px;
float:left;
margin:0 20px;
transform-style: preserve-3d;
animation:rotate 3s ease-in-out infinite alternate;
}
div div {
perspective: 1000px;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
#box1 div{
/*第一个图片背面不可见*/
backface-visibility: hidden;
}
#box1 .box1-1,#box2 .box2-1{
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png)no-repeat 0 0 / 100% 100%;
z-index:2;
}
#box1 .box1-2,#box2 .box2-2{
background:url(https://img.alicdn.com/imgextra/i2/2406102577/TB2cgJ7dVXXXXb3XXXXXXXXXXXX_!!2406102577.png)no-repeat 0 0 / 100% 100%;
transform:rotateY(180deg);
}
</style>
</head>
<body>
<div id="box1">
<div class="box1-1"></div>
<div class="box1-2"></div>
</div>
<div id="box2">
<div class="box2-1"></div>
<div class="box2-2"></div>
</div>
</body>
</html>
两个图片正面时可见并无什么变化
两个图片反面时，设置了背面不可见的图片隐藏了正面。
将代码复制下来在浏览器中观看，可以更好了解。
CSS3 2D变形
2D位移
translate()函数可以把元素从原来的位置移动。
translate(x-axis,y-axis);
translate()函数可以取一个值x-axis，也可以取两个值x-axis,y-axis。
当取一个值时，x-axis代表X轴移动的距离，正值时元素向右移动，负值向左移动。
当取二个值是，x-axis一样；y-axis代表Y轴，正值时元素向下移动，负值向上移动。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
@-webkit-keyframes translate{
from{
transform:translate(0);
}
20%{
transform:translate(100px);
}
40%{
transform:translate(100px,100px);
}
60%{
transform:translate(200px,100px);
}
80%{
transform:translate(200px,200px);
}
100%{
transform:translate(300px,200px);
}
}
@keyframes translate{
from{
transform:translate(0);
}
20%{
transform:translate(100px);
}
40%{
transform:translate(100px,100px);
}
60%{
transform:translate(200px,100px);
}
80%{
transform:translate(200px,200px);
}
100%{
transform:translate(300px,200px);
}
}
div{
width:100px;
height:100px;
background:hsl(102, 100%, 50%);
-webkit-animation:translate 1s ease infinite alternate;
animation:translate 1s ease infinite alternate;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
下面是两张图片的位移效果，建议将代码复制在浏览器中观看。
如果要将对象沿着X轴或者Y轴方向移动，除了可以使用translate(x-axis,0)和translate(0,y-axis)来实现。还可以使用translateX()与translateY()两个函数。
translateX(100px)等于translate(100px,0)
translateY(100px)等于translate(0,100px)
2D缩放
缩放函数scale()让元素根据中心原点对元素进行缩放。
scale(x-axis,y-axis);
scale()函数与translate()函数的语法相似，可以接受一个值，也可以接受两个值，只有一个值时，第二个值与第一个值一样，也就是说X轴与Y轴成比例缩放。默认值为1，当值小于1时，元素缩小；当值大于1时，元素放大。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
@-webkit-keyframes scale{
from{
transform:scale(-3);
}
100%{
transform:scale(5);
}
}
@keyframes scale{
from{
transform:scale(-3);
}
100%{
transform:scale(5);
}
}
div{
position:absolute;
left:40%;
top:40%;
width:70px;
height:100px;
background:url(https://img.alicdn.com/imgextra/i2/2406102577/TB24namdVXXXXbXXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 / 100% 100%;
-webkit-animation:scale 1s ease infinite alternate;
animation:scale 3s ease infinite alternate;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
scale()函数除了可以取正值，还可以取负值。负值时，会让元素翻转后再进行缩放。下面是两张动画片段，可以复制在浏览器中观看。
除了能通过scale()函数使元素在X轴和Y轴进行缩放之外，还可以使用scaleX()与scaleY()两个函数分别在X轴与Y轴缩放。
scaleX(2)相当于scale(2,1)
scaleY(2)相当于scale(1,2)
另外，缩放函数默认是以中心点为原点进行变形，可以使用transform-origin函数，修改元素的中心点，使缩放函数的效果不同。
2D倾斜
倾斜函数skew()能够让元素倾斜显示。与rotate()函数不同，rotate()函数只能旋转，不能改变元素形状；skew()函数不能旋转，当会改变元素形状。
skew(x-axis,y-axis)
x-axis表示元素X轴倾斜的角度。
y-axis表示元素Y轴倾斜的角度。
与前几个函数一样，当只有一个值时，表示的是X轴进行倾斜；二个值时，X轴与Y轴同时倾斜。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
width: 100px;
height: 100px;
background: hsl(102, 100%, 50%);
transform:skew(30deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
元素X轴倾斜效果
div {
...
transform:skew(0,30deg);
}
元素Y轴倾斜效果
div {
...
transform:skew(30deg,30deg);
}
元素X轴与Y轴同时倾斜效果
除了使用scale()函数使X轴与Y轴倾斜之外，还可以使用scaleX()与scaleY()函数让元素在X轴与Y轴倾斜。
scaleX(30deg)等于scale(30deg,0)
scaleY(30deg)等于scale(0,30deg)
还可以使用transform-origin属性修改元素变形的中心点，让元素有不同的倾斜效果。
2D矩阵
俺正在学习当中。点我我也要去学。
CSS3 3D变形
3D位移
CSS3中3D位移主要包括两种函数translateZ()和translate3d()。
translateZ(z-axis);
功能是让元素在3D空间沿Z轴进行位移。负值时，元素在视觉上感觉越来越远，导致元素变小；正值时，元素在视觉上感觉越来越近，导致元素变大了。代码效果translate3d()函数中。
translate3d(x-axis,y-axis,z-axis);
translate3d()函数使一个元素在三维空间移动。是translateX(),translateY(),translateZ()三个函数的缩写，与translate()函数不同的是，translate()函数只能作用在X轴与Y轴上，也就是在二维平面上移动。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
@-webkit-keyframes translate3d {
0% {
transform: translate3d(-30px,-20px,-300px);
}
100% {
transform: translate3d(30px,20px,200px);
}
}
@keyframes translate3d {
0% {
transform: translate3d(-30px,-20px,-300px);
}
100% {
transform: translate3d(30px,20px,200px);
}
}
body {
transform-style: preserve-3d;
perspective: 1000px;
}
.box1 {
position:absolute;
width: 70px;
height: 100px;
background: url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat 0 0 / 100% 100%;
-webkit-animation: translate3d 2s ease-in-out infinite alternate;
animation: translate3d 2s ease-in-out infinite alternate;
position:absolute;
top:30px;
left:20%;
}
.box2{
background: url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat 0 0 / 100% 100%;
opacity:.5;
width: 70px;
height: 100px;
position:absolute;
top:30px;
left:20%;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
下面是两张动画片段,图中可以看出Z轴的移动对视觉上的效果。
3D缩放
CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数。
scaleZ(z-axis);
让元素在Z轴上按比例缩放。
scale3d(x-axis,y-axis,z-axis);
是scaleX，scaleY，scaleZ三个函数的缩写，scaleZ(2)等于scale3d(1,1,2)。与scale函数不同的是，scale()是在二维平面上进行缩放。scale3d()在三维空间上进行缩放。scale3d()与scaleZ()要与其他函数一起使用才有效果。
建议在使用transform调用函数时，scale3d()或scaleZ()要写在其他函数之前，不然也没有效果。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
@keyframes scale3d{
0%{
transform:scale3d(1,1,-10) rotateX(0);
}
100%{
transform:scale3d(1,1,2) rotateX(40deg);
}
}
html,body{
transform-style: preserve-3d;
perspective: 1200px;
}
div{
width: 70px;
height: 100px;
position:absolute;
}
.box1{
left:40%;
top:40px;
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%;
z-index:2;
animation:scale3d 1s ease-in-out infinite alternate;
}
.box2{
left:40%;
top:40px;
opacity:.5;
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
下面是动画片段
3D旋转
CSS3中3D旋转可以使用rotateX(),rotateY(),rotateZ()三个函数分别设置三维空间的旋转。也可以使用rotate3d()函数集中进行设置，因为效果都是一样的，俺就选rotate3d()函数来说。
rotate3d(x,y,z,deg);
x,y,z代表旋转的三个轴，取值是0或1，0时代表这个轴不旋转，1时代表这个轴旋转。deg代表旋转的角度。
rotateX(45deg)等于rotate3d(1,0,0,45deg)
rotateY(45deg)等于rotate3d(0,1,0,45deg)
rotateZ(45deg)等于rotate3d(0,0,1,45deg)
rotateX(45deg);rotateY(45deg);等于rotate3d(1,1,0,45deg)
...
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
@keyframes rotate3d{
0%{
transform:rotate3d(0,0,0,0);
}
100%{
transform:rotate3d(1,1,1,45deg);
}
}
html,body{
transform-style: preserve-3d;
perspective: 1200px;
}
div{
width: 70px;
height: 100px;
position:absolute;
}
.box1{
left:40%;
top:40px;
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%;
z-index:2;
animation:rotate3d 1s ease-in-out infinite alternate;
}
.box2{
left:40%;
top:40px;
opacity:.5;
background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
下面是动画片段
3D矩阵
学习中...
CSS3 变形就写到此了。
总结一下最近写博客的感想。以前不写博客时，一本书几天就能看完，而且自己又光看不练，且又不爱复习，那过几天立马就忘得干净了。多次吃亏之下，决定写博客，做笔记。写博客的这几天，一个字“累”，以往看书时感觉不过尔尔，简单的很，等到自己写，就糟了，感觉左也不对，右也是错，这时才知道难啊。写出来后欢心鼓舞，好不快乐。写博客累，却是实在。子曰：学而不思则罔。唯有自己想出来，写下来，才不会迷惑。乡下人言语粗鄙，不知所云。
CSS3 变形记的更多相关文章
- CSS3变形记(上)：千变万化的Div
传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...
- 三角形变形记之纯css实现的分布导航条效果
三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...
- 前端 MVC 变形记
背景: MVC是一种架构设计模式,它通过关注点分离鼓励改进应用程序组织.在过去,MVC被大量用于构建桌面和服务器端应用程序,如今Web应用程序的开 发已经越来越向传统应用软件开发靠拢,Web和应用之间 ...
- 从零开始学习前端开发 — 14、CSS3变形基础
一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotat ...
- 重新想，重新看——CSS3变形，过渡与动画②
本篇文章主要用来归纳总结CSS3变形属性. CSS3变形属性大致可以分为以下三个部分: 变形控制属性 2D变形函数 3D变形函数 下面将对其一一进行分析: 1.变形控制属性 所谓的变形控制属性主要指“ ...
- 重新想，重新看——CSS3变形，过渡与动画①
学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...
- 旧书重温：0day2【5】shellcode变形记
紧接上一篇,结合第一篇 //这篇文章主要成功溢出一个带有缓冲区溢出的小程序,其中我们的shellcode被strcpy截断了所以我们需要变形shellcode,这个实验中也出现了很多意想不到的拦路虎, ...
- css3变形
CSS3变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点 ...
- css3 变形(transform)、转换(transition)和动画(animation)
http://www.w3cplus.com/content/css3-transform/ 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动tr ...
随机推荐
- UVaLive 6628 Grachten (水题，数学)
题意:给定一个平面图形并且且给了几条连,求一条. 析:简单么,三角形相似,很简单就AC. 代码如下: #pragma comment(linker, "/STACK:1024000000,1 ...
- C#引用传递
学过C#的人都知道,通过值或通过引用,值类型和引用类型都可以作为方法参数传递.在C#中,不管是值类型或者是引用类型,所有方法参数在默认情况下是通过值传递的. 1)通过值传递值类型 在通过值传递作为方法 ...
- poj2155 树状数组 Matrix
Matrix Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 14826 Accepted: 5583 Descripti ...
- ASP.NET- 使用NPOI导入导出标准Excel
尝试过很多Excel导入导出方法,都不太理想,无意中逛到oschina时,发现了NPOI,无需Office COM组件且不依赖Office,顿时惊为天人,怀着无比激动的心情写下此文. 曾使用过的方法 ...
- Castle框架中的IOC和AOP机制
反转控制(IOC)和面向切面编程(AOP)技术作为当前比较流行的技术,其优势已受到广泛关注,但是这两项新技术在实际项目上的应用研究却很落后,而且在.NET平台下实现这两项技术没有形成可以广泛套用的框架 ...
- wikioi 3027 线段覆盖 2
题目描述 Description 数轴上有n条线段,线段的两端都是整数坐标,坐标范围在0~1000000,每条线段有一个价值,请从n条线段中挑出若干条线段,使得这些线段两两不覆盖(端点可以重合)且线段 ...
- Oracle超出最大连接数问题及解决
用过Oracle的应该都熟悉如何查看和设置Oracle数据库的最大连接数.这里就再啰嗦一遍. 查看当前的连接数,可以用select count(*) from v$process;设置的最大连接数(默 ...
- 在PHP中利用wsdl创建标准webservice
参照整理: http://bbs.php100.com/read-htm-tid-95228.html http://www.ieliwb.com/wsdl-create-soapdiscovery/ ...
- HDU 5514 Frogs 容斥定理
Frogs Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5514 De ...
- Codeforces Gym 100338C C - Important Roads tarjan
C - Important RoadsTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contes ...