当前位置 > it书童 > css > 正文
推荐小册
Java的Lambda表达式
Java的Lambda表达式

聊聊jvm
jvm调优

java异常处理
java异常处理机制

java拾遗
java知识点,java面试题

java多线程
java多线程入门

学习spring源码
如何阅读spring源码

仿 spring 自制框架
造轮子,模仿 spring 自制一个框架

SpringCloud
SpringCloud微服务入门

微服务商城
使用微服务搭建一个电商项目

SpringBoot
SpringBoot入门学习,SpringBoot是什么

css 2D变换transform

css it书童 2019-10-05 14:08:25 0赞 0踩 314阅读 0评论

基本概念

2D变换的基本含义是:将浏览器页面(电脑屏幕所在面)当做一个二维平面,然后,通过CSS的设置,使网页元素能够在这个平面上进行“形状或位置变换”。

简单说就是,在一个元素的“本来”外观表现上,可以对其实行:位移,旋转,缩放,斜拉变形等。

比如一个简单的“正常盒子”,可以变换为如下一些形式:

img

主要属性

  • transform

这是最主要的变换属性;其实所有变换都是通过这个属性,使用不同的值来实现的。

而所用不同的值,主要就是指定不同的变换函数,以及所需要变换的数值;

常用2D变换函数如下:

transform: translatex(值): 将元素水平移动给定的值;

transform: translatey(值): 将元素垂直移动给定的值;

transform: translate(x值,y值): 同时进行水平和垂直移动,比如:translate(15px, 20px)

transform: rotate(角度值): 将元素旋转给定的角度,比如:30deg

旋转的方向是:正值为顺时针方向,负值为逆时针方向;

transform: scalex(比例值): x方向进行缩放;

transform: scaley(比例值): y方向进行缩放;

transform: scale(x比值, y比值): 同时进行水平和垂直方向的缩放,scale(1.5, 2)

transform: skewx(角度值): 将元素从x方向拉伸给定的角度;

transform: skewy(角度值): 将元素从y方向拉伸给定的角度;

transform: skew(x角度,y角度): 将元素从x和y方向拉伸给定的角度;

特别注意:

对一个元素可以同时进行多项变换。

进行多项变换时,多个变换属性值要一并写在一起,相互之间用空格隔开,类似这样:transform: translatex(5px) translatey(10px) rotate(20deg) scale(1.5, 2);

对于进行了变换的元素,虽然形状或位置都可能变了,但并不影响其他元素(即不影响布局效果)。

对于多项变换,即使每项设定的参数一样,但也可能会因为变换的顺序而最终表现不同。

  • transform-origin

指定变换时的“原点”(基点);默认是该变换元素的“中心点”(center, center);

形式:transform-origin:水平坐标 垂直坐标;

其中:水平坐标可以用一个长度值,或百分比,或left,center,right;

垂直坐标可以用一个长度值,或百分比,或top,center,bottom;

<style>
    .box1, .box2 {
        position: absolute;
        width: 200px;
        height: 100px;
        border: 1px solid skyblue;
        margin: 200px;
    }
    .box1 {
        transform: skew(20deg, 30deg);
    }
</style>
<div class="box1">11</div>
<div class="box2">22</div>

案例

将如下一张图片,实现如下所述的2D变换要求:

以图像左上角为原点,旋转15度,并右移20px,而后将x方向缩小为0.7倍;

最终效果类似这样:

<style>
    #box {
        margin: 30px;
        border: solid 1px skyblue;
        display: inline-block;
        padding: 5px;
    }
    #box img {
        transform-origin: 0 0;
        transform: rotate(15deg) translateX(20px) scale(0.7, 1);
    }
</style>
<div id="box">
    <img src="images/wukong.jpg" alt="">
</div>
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
转载须注明出处:https://www.itshutong.com/articles/294/css-2d-transform