CSS3特效：2D转换&小案例

最新推荐文章于 2022-11-27 11:16:04 发布

落花新月

最新推荐文章于 2022-11-27 11:16:04 发布

阅读量2k

点赞数

分类专栏： Web前端文章标签： 2D转换 transform 旋转移动缩放

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/50420364

版权

Web前端专栏收录该内容

68 篇文章 1 订阅

订阅专栏

一、2D转换之移动

1.transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

2. translate(x,y) //定义2D转换

3.示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Special Effect</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #5f5f5f;
            position: absolute;          /*绝对定位*/
            left:50%;      /*距左50%*/
            top:50%;            /*距上50%*/
            transform:translate(-50%,-50%);         /*以当前的div的左上角为原点，向左移动50%，再向上移动50%*/
        }
    </style>
</head>
<body>
  <div></div>
</body>
</html>

运行效果：（要让盒子显示在正中央）

添加transform之前

添加transform之后

二、2D转换之旋转

4.示例代码：

Style样式

div{
    width: 200px;
    height: 200px;
    background-color: #5f5f5f;
    margin: 100px auto;
    transform-origin: left top;           /*以左上角的点为旋转中心点进行旋转*/

}
div:hover{
    transform: rotate(45deg);          /*当鼠标移上去的时候旋转45度*/
}

运行效果：（鼠标移上去之前）

鼠标移上去之后：

三、2D转换之缩放

5.style样式代码示例：

div{
    width: 200px;
    height: 200px;
    background-color: #5f5f5f;
    margin: 100px auto;
  
}
div:hover{
    /*transform:scale(0.5);             !*在X轴和Y轴方向上均缩放0.5倍*!*/
    /*transform:scaleX(2);              !*在X轴方向上缩放2倍*!*/
    /*transform: scaleY(1.5);         !*在Y轴方向上缩放1.5倍*!*/
    transform: scale(2,0.5);             /*X轴方向上缩放2倍，Y轴方向上缩放0.5倍*/
}

运行效果：

鼠标移动之前：

鼠标移动上去之后：

四、2D转换之斜切

样式代码示例：

div{
    width: 200px;
    height: 200px;
    background-color: #5f5f5f;
    margin: 100px auto;
    
}
div:hover{
    /*transform: skewX(10deg);         !*X轴方向上斜切10度*!*/
    transform: skewY(15deg);           /*Y轴方向上斜切15度*/
}

运行效果：

6.X轴上斜切

Y轴斜切

7.小案例：

div{
    width: 350px;
    height: 50px;
    border:#5f5f5f solid 1px;
    margin:100px auto;
    position: relative;                /*父级相对，子级绝对，只要就会以子级为原点定位*/
}
div:after{
    content:'';            /*content即使没有内容是空的，也是要写的*/
    width: 20px;
    height: 20px;
    display: block;           /*因为是行内元素，只有让它以块（block）的形式显示，宽高才会起作用*/
    border-bottom: #5f5f5f solid 2px;          /*下边框*/
    border-right: #5f5f5f solid 2px;          /*右边框*/
    position: absolute;
    top:50%;              /*距离上面50%*/
    right:15px;                 /*距离右边15像素*/
    transform:translateY(-50%) rotate(45deg);       /*向上移动50%，旋转45度*/
}
div:hover{
    border: #9361ff solid 1px;            /*当鼠标移上去的时候，颜色变为#9361ff*/
}
/*
*当鼠标移上去后，三角的颜色也要变化
*/
div:hover:after{             /*注意是div:hover:after而不是div:after:hover*/
    border-bottom: #9361ff solid 2px;
    border-right: #9361ff solid 2px;
}

<body>
<div></div>
</body>

鼠标移动上去以前：

鼠标移上去以后边框颜色和三角颜色都会发生变化。

8.transition

9. 图片是行显示的，如果想让margin起作用，要让它块显示：display:block;

10.transition 过度示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition</title>
    <style>
       div{
    width: 300px;
    height: 300px;
    background: #fdff1f;
    border: #ffae28 solid 3px;
    margin: 100px auto;
    transition: all 0.5s;
}
div:hover{
    width: 500px;
    height: 400px;
    border-radius: 15px;
    background: #ff67c2;

}
    </style></head><body>  <div></div></body></html>

运行效果：

鼠标移上去之前

鼠标移上去之后

11.360度旋转案例：

img{
    width: 320px;
    height: 350px;
    display: block;
    margin: 40px auto;
    border-radius: 50%;
    border: #2e51ff solid 2px;
    transition: all 5s;             /*all来表示所有的属性都变化*/
}
img:hover{
    transform: rotate(360deg);
}

<img src="dousen.jpg">

运行效果：

鼠标移动上去之前

鼠标移动上去之后（旋转的过程中截图）

12.旋转过渡案例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D旋转</title>
    <style type="text/css">
        img{
            transition: transform 1s ease-in 0s;      /*ease-in表示运动方式*/
        }
        img:hover{
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
<img src="images/wukong.jpeg" alt="孙悟空">
</body>
</html>

运行效果：

鼠标移动上去之前

鼠标移上去之后：

13.一般小的图标用小盒子，如：i，em，span等来做。

background-position:用它来解决背景图片定位的问题（精灵图片）

背景定位的一个小案例：

（图片截自传智公开课视频）

14.能用CSS做的，就不用JS，因为JS的执行效率相对太低。

落花新月

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3特效：2D转换&小案例

一、2D转换之移动1.transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。2. translate(x,y) //定义2D转换3.示例：html>lang="en"> charset="UTF-8"> Special Effect div{
复制链接

扫一扫