网站首页 > 技术文章正文

CSS3 transform变形

hmc789 2024-11-25 12:50:04 技术文章 2 ℃

transform变形

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组成

<!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;
    background-color: orange;

    transition: 1s;

    box-shadow: 0 0 5px 20px red;
}
div:hover{
    transform: scale(2);

    /*css3新增特性都不会对盒子模型产生影响 盒子模型大概永远是由width/height+padding+border+marign组成*/
    }
</style>
</head>
<body>
<div></div>
<p>我是占位符</p>
</body>
</html>

上一篇： css制作逐帧动画，好看又好玩
下一篇：网站实现哀悼变灰效果，一行css样式代码搞定

网站首页 > 技术文章 正文

CSS3 transform变形

猜你喜欢

网站首页 > 技术文章正文