CSS3 transform变形

ransform变形

transform在字面上就是变形、改变之意。

CSS3的transform主要包括rotate(旋转)、skew(扭曲)、scale(缩放)和translate(移动)以及matrix(矩形变形)。

rotate使用格式:(取值范围0-360, 单位deg)

rotate(10deg)

rotate(360deg)

rotateX(angle) 定义沿着 X 轴的 3D 旋转。

rotateY(angle) 定义沿着 Y 轴的 3D 旋转。

rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

角度等同于钟表: 12点: 0deg 3点: 90deg 6点: 180deg 9点: 270deg

【实例】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>图片转换演示</title>
<style type="text/css">
img{
    width:460px;
    height:480px;
    border-radius:50%;
    transition:1s;
}
/*
过渡到···deg,而不是过渡···deg
*/
img:hover{
    /*transform: rotate(45deg);*/
    transform: rotateX(45deg);/*沿着x轴旋转*/
    transform: rotateY(45deg);/*沿着y轴旋转*/
    transform: rotateZ(45deg);/*沿着z轴旋转*/

    /*正数顺时针*/
    transform: rotate(45deg);/*z轴*/
    /*负数逆时针*/
    transform: rotate(-45deg);/*z轴*/

}
</style>
</head>
<body>
<img src="http://p1.ifengimg.com/2018_42/C03628FF6F4ED06948E0A488AD90E26E780BA05E_w981_h658.jpg"/>
</body>
</html>

transform-origin: 设置旋转元素的基点位置

实例2: 旋转基点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
img{
    width: 300px;
    height: 220px;
    display: block;
    margin: 100px auto;

    transition: 1s linear;

    /*我们的旋转基点默认是中心*/
    /*规定旋转基点的
    * ①方位名词left top bottom right center
    * ②px(注意坐标原点为左上角)
    * ③%(参考的是宽高)*/
    transform-origin: center center;
    transform-origin: right top;
    transform-origin: -300px 110px;
    transform-origin: 150px 110px;
    transform-origin: 50% 50%;
    transform-origin: 100% 100%;

}
body:hover>img{
    transform: rotateX(45deg);/*沿着x轴旋转*/
    transform: rotateY(45deg);/*沿着y轴旋转*/
    transform: rotateZ(45deg);/*沿着z轴旋转*/
    transform: rotate(360deg);/*z轴*/
}
</style>
</head>
<body>
<img src="img/薛凯琪.jpg"/>
</body>
</html>

skew使用格式:(取值范围0-180, 单位deg)

skew(10deg,10deg)

skew(180deg,180deg)

实例: 斜切

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    width: 400px;
    height: 300px;
    display: block;
    margin: 100px auto;

    transition: 1s;
}

img:hover{
    transform: skewX(45deg);
    transform: skewX(-45deg);
    transform: skewY(45deg);
    transform: skewY(-45deg);

    /*skew(x轴斜切角度,y轴斜切角度)*/

    /*skew(x,y)同步动画*/
    /*transform: skew(45deg,45deg);*/


    /*现在x斜切基础之上再进行y斜切*/
    transform: skewX(45deg) skewY(45deg);
    transform: skewY(45deg) skewX(45deg);

}
</style>
</head>
<body>
<img src="img/薛凯琪.jpg"/>
</body>
</html>

scale使用格式：

scale(0.2)

scale(2)

scale(2,3)

scale(0.5,2)

实例: 缩放

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    width: 400px;
    height: 300px;
    display: block;
    margin: 100px auto;

    transition: 1s;
}
img:hover{
    transform: scale(1);/*本身*/
    transform: scale(2);/*扩大*/
    transform: scale(0.5);/*扩大*/
    transform: scale(-1);/*倒立*/
    transform: scale(-2);/*倒立放大2倍*/
    transform: scale(-0.5);/*倒立缩小1半*/
}
</style>
</head>
<body>
<img src="img/薛凯琪.jpg"/>
</body>
</html>

translate使用格式：

translate(10px)

translate(20px,20px)

translate(-25px,-25px)

实例: 平移

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
img{
    width: 400px;
    display: block;
    margin: 100px auto;
    transition: 1s;
}

img:hover{
    transform: translateX(100px);
    transform: translateX(-100px);
    transform: translateY(100px);
    transform: translateY(-100px);
    transform: translate(100px,100px);


    /*%参考的是各自的宽和高*/
    transform: translateX(100%);
    transform: translateY(100%);
}
</style>
</head>
<body>
<img src="img/薛凯琪.jpg"/>
</body>
</html>

综合使用: 旋转、斜切、缩放

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 300px;
    margin: 100px auto;
    background-color: orange;

    transition: 1s;
}
div:hover{
    /*transform: rotate(360deg);
    transform: skew(45deg);*/

    /*综合使用*/
    transform: rotate(360deg) skew(45deg) scale(0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

css3新增特性都不会对盒子模型产生影响, 盒子模型大概永远是由width/height+padding+border+marign组成

言

在CSS3中新增了很多的新特性，其中使用频率比较高的应该是动画效果了，它可以帮助我们实现以前使用Javascript才能实现的效果，极大的提高网页的性能。今天这篇文章我们就来一起看一个使用CSS3新特性完成的翻书效果吧。

本文的源码已经放在了Github上，感兴趣的可以clone到本地试试，地址如下。

https://github.com/zhouxiongking/article-pages/blob/master/articles/rollPage/rollPage.html

CSS3

实现效果

首先我们来看看实际的运行效果，动态图如下所示。

效果图

页面分析

在看到上述的效果图后，我们来进行分析，这个过程是如何实现的。

这个页面我们通过一个ul包含三个li来实现，每个li都给一个固定的宽度和高度。

第一个li在页面上静止不动。
第二个li添加动画效果，使其直接绕Y轴翻转360度。
第三个li添加动画效果，但是翻转周期是在25%的时候开始，因此会有一种翻书的速度差异感。

上面的步骤分析完后就剩下最重要的一个过程，那就是给外层的ul元素添加perspective属性，这个属性是决定这个动画能不能实现的主要的因素。

perspective

perspective是CSS3中新增的属性，表示的是设置某个元素被查看的视角，用于实现3D效果。

需要注意的是当某个元素设置了perspective属性时，其子元素会获得透视效果，而不是这个元素本身。

我们来看一个简单的例子，有一个section父元素和一个div子元素，让div元素旋转45度，html元素如下。

html元素

其对应的CSS属性如下。

CSS属性

在section元素上，如果不使用perspective的情况下，得到效果如下图所示。

效果图1

如果给section元素加上perspective属性，并设定600px时，得到的效果图如下。

效果图

通过以上两幅图的对比我们发现，两幅图在Y轴的视角上发生了变化。

接下来，我们来具体看看这个翻书效果的代码实现。

翻书效果HTML代码

通过之前的分析，我们知道这个效果是通过ul与li来实现的，html部分代码如下。

HTML代码

翻书效果CSS代码

首先看看ul与li的基本css属性，记住这里需要给ul元素添加perspective属性。

基本CSS属性

然后是给第二个li添加动画。

第二个li的css属性

最后是给第三个li添加动画。

第三个li的css属性

注意到上面的代码中有个25%和100%的设置，这个和第二个li不同，所以会有一种翻转书页快慢的差异感。

如果按照上述代码来做，即可实现文章开始的翻书动画效果。

结束语

今天这篇文章主要是通过CSS3新增的属性实现了一个翻书动画效果，大家学会了吗？

然CSS3在兼容性方面不尽如意，但是，在一些动画效果方面，为广大前端开发人员带来了福音。既可以实现炫酷的渲染效果，又摆脱了必须使用脚本语言的弊端。在CSS3中，可以利用transform功能的缩放 scale、旋转 rotate、移动 translate来实现文字或图像的旋转、缩放、倾斜、移动。

1. scale(x,y) 对元素进行缩放

X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数

Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。

CSS代码：

.test{

-moz-transform:scale(2,2);

-webkit-transform:scale(2,2);

-o-transform:scale(2,2);

width:198px;

height:133px;

background：#f00；

}

2. rotate(x,y,z,angle) 对元素进行旋转

X表示沿着X轴旋转

Y表示沿着Y轴旋转

Z表示沿着Z轴旋转

CSS代码：

.text{

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

-o-transform: rotate(-90deg);

width:198px;

height:133px;

background：#f00；

}

3. translate(x,y)对元素进行移动

X表示水平方向的移动距离 | Y表示垂直方向的移动距离

CSS代码：

.text{

-moz-transform: translate(10px, 20px);

-webkit-transform: translate(10px, 20px);

-o-transform: translate(10px, 20px);

width:198px;

height:133px;

background：#f00；

}

今天，就先说这么多吧。感谢大家的赏脸，希望对大家有所帮助。

在线咨询

上一篇：PHP转换HTML为PDF文档的方法和常见问题
下一篇：九大维度帮你选出最理想的HTML网页内容提取工具

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS3 transform变形

言

实现效果

页面分析

perspective

翻书效果HTML代码

翻书效果CSS代码

结束语

您的项目需求