HTML+CSS教学之CSS3变形

最新推荐文章于 2024-09-10 17:45:18 发布

Mr_JiLuRen

最新推荐文章于 2024-09-10 17:45:18 发布

阅读量255

点赞数 1

文章标签： html5 css3

本文链接：https://blog.csdn.net/Mr_wanghaowen/article/details/104451902

版权

本文介绍了CSS3的transform属性，包括translate位移、scale缩放和rotate旋转三种基本操作。通过实例展示了如何使用这些属性改变HTML元素的位置、大小和角度，帮助读者理解并掌握CSS3变形技巧。

摘要由CSDN通过智能技术生成

CSS3变形（transform）属性是对元素应用2D或3D的转换，该属性允许我们对元素进行位移、缩放、旋转、斜切。
1、translate(位移)

    transform:translate(100px,100px); : 两个值 分别对应  x 和 y。

    transform:translateX(100px);

    transform:translateY(100px);

    transform:translateZ(100px);   ( 3d )

例子：首先在HTML中创建两个盒子，然后在CSS中为两个盒子加上宽、高、边框或背景颜色。

HTML代码：

<div id="box1">

<div id="box2"></div>

</div>

CSS代码：

<style>

#box1{
    width:300px; height: 300px; border:1px black solid; margin:30px auto;}

    
#box2{
    width:100px; height:100px; background:red; transition: 1s;}

    
#box1:hover #box2{