css3中translation用法的几点感悟

wutong7251113

于 2016-06-26 11:24:13 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

文章标签： translation

本文链接：https://blog.youkuaiyun.com/wutong7251113/article/details/51762011

本文介绍了一个使用CSS实现的数字元素点击后发生的旋转效果案例。通过设置transition属性，实现了平滑的过渡动画，并提供了完整的HTML和CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
比如我需要制作途中的数字3，鼠标一点击，就可以发生旋转。
代码如下：

<section class="list">
      <a class="translate"href="javascript:;">3
      </a>
    </section>
.translate{    position: static;
    float: left;
    display: block;
    height: 78px;
    border-radius: 0px;
    line-height: 80px;
    width: 100px;
    color: #ec9573;
    font-size: 80px;
    text-align: center;
    text-indent: 0px;
    background: none;
    transition: All 1s ease-in-out;
    -webkit-transition: All 1s ease-in-out;
    -moz-transition: All 1s ease-in-out;
    -o-transition: All 1s ease-in-out;}
主要是translation的属性。交互感很强。