css3 transform 2D转换(动画系列一）

最新推荐文章于 2023-12-26 14:08:56 发布

jiushiguangwufa

最新推荐文章于 2023-12-26 14:08:56 发布

阅读量796

点赞数

文章标签： css3 transform 照片墙 2

本文链接：https://blog.csdn.net/kongbingyan/article/details/51057672

版权

一、

transform（变形）、transition（过渡）和animation（动画）是CSS3动画的3大部分,由于它们的出现，web前端实现动画变得简单方便起来，不在单纯依靠js，实现的动画效果也不错。

transform主要用于元素的变形处理。其主要拥有四种变换:rotate()、scale()、skew()、matrix()

1、translate() 方法平移

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数

注意：向下向右是正值

rotate() 方法旋转

2、通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转

正值顺时针，负值逆时针

3、scale() 方法缩放

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数。

注意，Y是一个可选参数，如果没有设置Y值，则表示X、Y两个方向的缩放倍数是一样的（同时放大相同倍数）。

x、y 表示元素沿着水平方向（X轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小

4、skew() 方法斜切(倾斜）

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

在CSS3中，我们可以使用rotate()方法来将元素相对中心原点进行旋转。这里的旋转是二维的，不涉及三维空间的操作。

其实skewX()方法变形原理是这样的：由于我给元素限定了高度为100px，而skewX()方法是沿着X轴方向倾斜。所以，只要倾斜角度不是180°，元素都会保持100px的高度。同时为了保持倾斜，只能沿着X轴拉长本身。

5、transform-origin用来设置旋转缩放等中心点坐标，

任何一个元素都有一个中心原点，默认情况下，元素的中心原点位于X轴和Y轴的50%处。

默认情况下，CSS3变形进行的位移、缩放、旋转、倾斜都是以元素的中心原点进行变形。

假如我们要使得元素进行位移、缩放、旋转、倾斜这些变形操作的中心原点不是原来元素的中心位置，那该怎么办呢？

在CSS3中，我们可以通过transform-origin属性来改变元素变形时的中心原点位置。

transform-origin属性取值有2种：一种是采用长度值，另外一种是使用关键字。长度值一般使用百分比作为单位，很少使用px、em等作为单位。不管transform-origin取值为长度值还是关键字，都需要设置水平方向和垂直方向的值。transform-origin属性取值跟背景位置background-position属性取值相似

transform-origin属性取值
关键字	百分比	说明
top left	0 0	左上
top center	50% 0	靠上居中
top right	100% 0	右上
left center	0 50%	靠左居中
center center	50% 50%	正中
right center	100% 50%	靠右居中
bottom left	0 100%	左下
bottom center	50% 100%	靠下居中
bottom right	100% 100%	右下

二、

transform属性变形方法
方法或属性	说明
translate()	位移
scale()	缩放
rotate()	旋转
skew()	倾斜
transform-origin	中心原点

三、简单应用了skew

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:skew(0,20deg);
-ms-transform:skew(0,20deg); /* IE 9 */
-moz-transform:skew(0,20deg); /* Firefox */
-webkit-transform:skew(0,20deg); /* Safari and Chrome */
-o-transform:skew(0,20deg); /* Opera */
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>

四、实战

这一章看似简单易懂，其实这些变形效果往往都是综合CSS3过渡或CSS3动画等来实现非常复杂的特效。

用这里的知识可以实现简单的照片墙效果，你也可以自己发挥做出更加个性的照片墙，以后我可能会找一些更加炫酷的实现，今天先用这个知识做简单的实现

<!DOCTYPE html>
<html>
<head>
<title>CSS3实现个性图片墙</title>
<style type="text/css">
#container
{
position:relative; 注释：可以结合前面的博客，想想这样定位的作用
width:800px;
height:600px;
margin:0 auto;
background-image:url("../App_images/lesson/run_css3/bg.jpg");
}
img
{
position:absolute;
padding:10px;
background-color:White;
}
img:Hover
{
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 注释：鼠标放上去图片出现阴影
}
#container img:first-child 注释：用来选择是第几张图片
{
left:80px; top:60px; -webkit-transform:rotate(30deg);
}
#container img:nth-child(2)
{
left:240px; top:60px; -webkit-transform:rotate(-30deg);
}
#container img:nth-child(3)
{
left:420px; top:60px; -webkit-transform:rotate(30deg);
}
#container img:nth-child(4)
{
left:100px; top:240px; -webkit-transform:rotate(-30deg);
}
#container img:nth-child(5)
{
left:270px; top:240px; -webkit-transform:rotate(0);
}
#container img:last-child
{
left:420px; top:240px;-webkit-transform:rotate(30deg);
}
</style>
</head>
<body>
<div id="container">
<img src="#/> 注释：添加自己喜欢的图片
<img src="#/>

jiushiguangwufa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 transform 2D转换(动画系列一）

transform（变形）、transition（过渡）和animation（动画）是CSS3动画的3大部分,由于它们的出现，web前端实现动画变得简单方便起来，不在单纯依靠js，实现的动画效果也不错。照片墙transform主要用于元素的变形处理。其主要拥有四种变换:rotate()、scale()、skew()、matrix()translate() 方法平移通
复制链接

扫一扫