首页 > 前端 > 使用Css3的transition和transform属性实现图片动态翻转效果实例

使用Css3的transition和transform属性实现图片动态翻转效果实例

2022年5月6日
- 前端
1,137 次
标签： css3, Html, js

在Css3中加了不少很不错的新的属性，其中transition和transform两个是很不错的新属性，使用这两个属性就可以达到不用Js就可以实现图片动态翻转效果，个人感觉使用这两个新属性应该要比使用Js实现图片动态翻转效果的响应速度更快。本文将依次介绍transition和transform使用方法，最后以一个使用Css3的transition和transform属性实例来实现图片动态翻转效果。

一、transform使用方法及属性值：

transform该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法：transform: none | transform-functions;

其中transform-functions有以下几个值：

rotate()：实现旋转，单位为deg，rotate(360deg)就是旋转360度。

scale()：实现缩放，scale()的默认值是1，当设置0.01-0.99之间的任何值时，将使元素缩小；设置大于1的任何值时，将使元素放大。

translate()：可以将元素向指定的方向移动，类似于 position 中的 relative。或以简单的理解为，使用 translate()函数，可以把元素从原来的位置移动，而不影响页面上的其他的元素。

关于transform-functions中的更多用法这里就不过多叙述，可百度参考相关文章。

二、transition使用方法及属性值：

transition：可以实现过渡，可以做到类似Js的动态效果。

transition: [属性名] [持续时间] [速度曲线] [延迟时间];

[属性名]是指css属性名称或者all，可以写宽度、高度、背景色、外边距、内边距等属性，all就是所有属性。

[持续时间]是指定完成过渡所需的时间，单位就是时间单位。

[速度曲线]指定过渡函数，规定速度效果的速度曲线。

[延迟时间]指定开始出现的延迟时间。

三、使用transition和transform注意实现：

1、transition：谁做过渡给谁加，如果有多个属性需要过渡，可以用,进行分割使用。

2、transform同时使用多个转换，其格式为transform：translate() rotate() scale() 等，多个属性之间用空格隔开。同时位移和其他属性的时候需要把位移放到首位。

3、transform配合hover及transition使用。

四、使用Css3的transition和transform属性实现图片动态翻转效果实例demo:

Html代码部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body class="container">
    <section class="row margin20">
        <article class="col-md-2 article-show">
            <header class="personage"><a href="article.html">国学小常识之我国历史上的十圣</a></header>
            <a href="article.html">
                <figure class="thumbnail">
                    <p>我国历史上有十圣，你知道有哪些么？这还是一个比较冷门的历史小知识，下面小编带你一起了解一下。</p>
                    <img src="7.jpg" alt="国学小常识之我国历史上的十圣">
                </figure>
            </a>
        </article>
    </section>

</body>

</html>

css部分代码：

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 14px;
    background-color: #111;
}

.margin20 {
    margin-top: 50px;
}

.article-show {
    padding: 3px;
    background-color: #f3f3f3;
}

.article-show:hover {
    background-color: #fff;
}

.article-show .personage {
    margin: 5px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.article-show .thumbnail {
    position: relative;
    margin: 5px;
    overflow: hidden;
}

.article-show .thumbnail p {
    position: absolute;
    bottom: -17px;
    right: 0;
    padding: 3px;
    color: #ddd;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    background-color: rgba(0, 0, 0, .5);
    transition: all, 1s;
    -webkit-transition: all, 1s;
    -moz-transition: all, 1s;
    -ms-transition: all, 1s;
    -o-transition: all, 1s;
}

.article-show .thumbnail:hover p {
    width: 100%;
    height: 100%;
    top: 0;
    padding: 8px;
    overflow: visible;
    color: white;
    background-color: rgba(0, 0, 0, .1);
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}

.article-show .thumbnail img {
    display: block;
    width: 100%;
    height: 230px;
}

使用Css3的transition和transform属性实现图片动态翻转效果实例效果图：

鼠标未悬停时的状态截图：

鼠标悬停后的状态截图:

实例截图不能看到效果，可将demo实例Down到本地进行查看。另外，本博客（李涛博客）的导航菜单栏也是使用transition和transform实现了动态翻转效果。

本实例中使用了bootstrap.min.css的cdn库，在自己写的css中使用了绝对定位了和相对定位，关于transition和transform的更多用法，因时间问题也没有过多的介绍，自己可百度查阅。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。

使用Css3的transition和transform属性实现图片动态翻转效果实例

猜你喜欢