变换 transform

最新推荐文章于 2021-10-12 09:05:17 发布

Doigt_love

最新推荐文章于 2021-10-12 09:05:17 发布

阅读量410

点赞数

分类专栏： H5 文章标签： css transform

本文链接：https://blog.csdn.net/Doigt_love/article/details/52265745

版权

H5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

变换 transform

简单的来说，transform可以做到平移，旋转，缩放，倾斜效果，这些再加上transition或者animation的话，想必效果一定很棒。

先看它都有什么吧。

我写的一个example ：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    P{
        border: medium double #D83C3C;
        background-color: lightgray;
        padding: 5px;
        box-shadow: 0 0 0 5px gray;
    }
    span{
        padding: 4px; 
        border: thin solid red;
        background-color: #AFAAE0;
        font-size: small;
        border-radius: 15px;
    }
    span:hover{
        transform: rotate(360deg);     /* 旋转360度*/  
      transition: all 2s;        /* 过渡2s*/
        background-color: #8461DB;
        font-size: x-large ;
    }
    #right{
        background-color: pink;
    }
    #right:hover{
        
        transform: scale(1.5);   /*放大1.5倍*/
          border: outset double gray;
    }
</style>
</head>
<body>
<h1>请将鼠标移动到下面的矩形上：</h1>
<P>
    As the discribing of the fol picture, a man is meeting with an women, the women is soAs the discribing of the fol picture, a man is meeting with an women, the women is so
    <span >
    两秒旋转360
    </span>
    As the discribing of the fol picture, a man is meeting with an women, the women is soAs the discribing of the fol picture, a man is meeting with an women, the women is soAs the discribing of the fol picture, a man is meeting with an women, the women is so
    
</P>
<input type="button" value="点我把" id="right" />
</body>
</html>

效果图：