transform的本意就是变换、使...变形的意思，在CSS3中transform属性其实就是用于设置元素某些属性的变换，比如放大缩小、平移、旋转等等。
CSS3中新增与变换相关的属性如下：
首先来看transform属性，其对应属性值较多，整理如下图
-
transform:none表示无变换
关于2d变换的方法： -
transform:translate()表示平移
可以传递两个参数，也可以传递一个参数
传递两个参数，第一个参数表示水平平移，第二个表示垂直方向平移量，可以为负值。
传递一个参数时表示：水平方向平移量，垂直方向不偏移即为0
<head>
<style>
body{
background-color: #eee;
}
section{
width: 650px;
height: 550px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.wrapper {
width: 250px;
height: 100px;
background-color: #bbb;
transition: all 2s;
border: 1px solid deeppink;
}
.wrapper div{
width: 250px;
height: 100px;
text-align:center;
line-height: 100px;
font-size: .8em;
font-weight: bold;
background-color: pink;
}
.wrapper:nth-of-type(1) div{
transform:translate(50px,50px)
}
.wrapper:nth-of-type(2) div{
transform:translate(50px)
}
.wrapper:nth-of-type(3) div{
transform:translate(50%,50%)
}
.wrapper:nth-of-type(4) div{
transform:translate(50%)
}
.wrapper:nth-of-type(5) div{
transform:translate(-10px,-10px)
}
.wrapper:nth-of-type(6) div{
transform:translate(-10px)
}
</style>
</head>
<body>
<section>
<div class="wrapper">
<div>transform:translate(50px,50px)</div>
</div>
<div class="wrapper">
<div>transform:translate(50px)</div>
</div>
<div class="wrapper">
<div>transform:translate(50%,50%)</div>
</div>
<div class="wrapper">
<div>transform:translate(50%)</div>
</div>
<div class="wrapper">
<div>transform:translate(-10px -10px)</div>
</div>
<div class="wrapper">
<div>transform:translate(-10px)</div>
</div>
</section>
</body>
结果
-
transform:translateX()表示单独平移水平方向 -
transform:translateY()表示单独平移垂直方向
.wrapper:nth-of-type(1) div{
transform:translateX(50px)
}
.wrapper:nth-of-type(2) div{
transform:translateY(50px)
}
结果
-
transform:rotate()表示旋转度数
可以是负值
.wrapper:nth-of-type(1) div{
transform:rotate(30deg)
}
.wrapper:nth-of-type(2) div{
transform:rotate(90deg)
}
.wrapper:nth-of-type(3) div{
transform:rotate(-30deg)
}
.wrapper:nth-of-type(4) div{
transform:rotate(-90deg)
}
结果
-
transform:scale()表示缩放比例
可以传递两个参数，也可以传递一个参数
两个参数时分别表示水平方向的缩放比例、垂直方向缩放比例
如果只传递了一个参数，第二个参数等比缩放
当设置两个值一样时，相当于设置一个值
<head>
<style>
body{
background-color: #eee;
}
section{
margin-top: 100px;
width: 650px;
height: 400px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.wrapper {
width: 250px;
height: 100px;
background-color: #bbb;
transition: all 2s;
border: 1px solid deeppink;
}
.wrapper div{
width: 250px;
height: 100px;
text-align:center;
line-height: 100px;
font-size: .8em;
font-weight: bold;
background-color: pink;
}
.wrapper:nth-of-type(1) div{
transform:scale(.8,.8)
}
.wrapper:nth-of-type(2) div{
transform:scale(.8)
}
.wrapper:nth-of-type(3) div{
transform:scale(1.2,1.2)
}
.wrapper:nth-of-type(4) div{
transform:scale(1.2)
}
</style>
</head>
<body>
<section>
<div class="wrapper">
<div>transform:scale(.8,.8)</div>
</div>
<div class="wrapper">
<div>transform:scale(.8)</div>
</div>
<div class="wrapper">
<div>transform:scale(1.2,1.2)</div>
</div>
<div class="wrapper">
<div>transform:scale(1.2)</div>
</div>
</section>
</body>
结果
-
transform:skew()表示斜切扭曲
可以传递两个值或一个值
两个值分别表示水平扭曲度数、垂直扭曲度数
如果一个值则表示水平扭曲，垂直方向不扭曲
-
transform:skewX()表示单独设置水平扭曲 -
transform:skewY()表示单独设置垂直扭曲
.wrapper:nth-of-type(1) div{
transform:skewX(10deg)
}
.wrapper:nth-of-type(2) div{
transform:skewX(10deg)
}
.wrapper:nth-of-type(3) div{
transform:skewY(20deg)
}
.wrapper:nth-of-type(4) div{
transform:skewY(20deg)
}
结果
-
matrix()指定了一个由指定的6个值组成的2D变换矩阵。比较少用
下面是3d变换相关的属性函数
-
transform:translate3d()
必须设置3个值，分别是X轴平移量、Y轴平移量和Z轴方向的平移量
-
transform: translateZ()表示单独设置在z轴上的平移 -
transform: rotate3d()表示3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略 -
transform: rotateX()表示在x轴的旋转角度 -
transform: rotateY()表示在y轴的旋转角度 -
transform: rotateZ()表示在z轴的旋转角度
.wrapper:nth-of-type(1) div{
transform:rotateX(30deg)
}
.wrapper:nth-of-type(2) div{
transform:rotateX(-30deg)
}
.wrapper:nth-of-type(3) div{
transform:rotateY(30deg)
}
.wrapper:nth-of-type(4) div{
transform:rotateY(-30deg)
}
.wrapper:nth-of-type(5) div{
transform:rotateZ(30deg)
}
.wrapper:nth-of-type(6) div{
transform:rotateZ(-30deg)
}
-
transform: scale3d()表示3d缩放，接收三个参数分别对应x，y，z轴的缩放比例系数 -
transform: scaleZ()表示设置z轴方向上的缩放系数
.wrapper:nth-of-type(1) div{
transform:scale3d(.8,.8,.8)
}
-
transform: perspective()表示景深
在我们CSS3中，perspective用于激活一个3D空间，属性值就是景深大小（默认none无景深），景深就是我们的肉眼距离显示器的距离，景深越大，元素离我们越远，效果就不好。所以应用景深的元素称为“舞台元素”
注意：默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。若使用perspective()函数，那么他必须被放置在transform属性的首位，如果放在其他函数之后，则会被忽略
-
transform-origin属性用于设置以某个原点进行转换
可以传递两个或者一个参数
如果提供两个时，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
取值可以是：
%
<length>
left
center
right
top
center
bottom -
transform-style属性用于指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。
取值：
flat：指定子元素位于此元素所在平面内
preserve-3d：指定子元素定位在三维空间内 -
perspective：none | <length>
设置在父元素上，对后代元素其作用（在子元素中也可以使用transform: perspective()这种写法）
指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。「z>0」的三维元素比正常大，而「z<0」时则比正常小，大小程度由该属性的值决定。 -
perspective-origin
同perspective属性，也是设置在父元素上，对后代元素起作用。 这个属性来设置你在X,Y轴坐标确定的那个点来看这个元素，Z轴是被perspective属性设置的 -
backface-visibility表示背面面向用户时是否可见
visible：指定元素背面可见，允许显示正面的镜像。
hidden：指定元素背面不可见
网友评论