关于新手如何学习H5和CSS(六)

最新推荐文章于 2024-06-17 22:13:35 发布

一个前端程序员

最新推荐文章于 2024-06-17 22:13:35 发布

阅读量133

点赞数

本文链接：https://blog.csdn.net/Whileyi/article/details/99610928

版权

2D的基本应用

首先熟悉一下它的各种属性

none：无转换
translate()：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
rotate()：指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义
scale()：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
skew()：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

translate()

下方插入代码来举例

<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
#div2
{
transform:translate(50px,100px);/*第一个参数对应X轴，第二个参数对应Y轴。*/
}
</style>

<body>

<div>你好。</div>

<div id="div2">Hello</div>

</body>

运行

在这里插入图片描述

rotate()

以下代码仅修改transform属性

#div2
{
transform:rotate(90deg);
}

运行

在这里插入图片描述

scale()

#div2
{
margin:100px;
transform:scale(2,4);
}

运行

在这里插入图片描述

skew()

#div2
{
transform:skew(30deg,20deg);/*第一个参数对应X轴，第二个参数对应Y轴*/
}

运行

在这里插入图片描述

一个前端程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫