css3 动画之 2D旋转 3D旋转放大

最新推荐文章于 2022-10-26 19:24:35 发布

BunnyMelody

最新推荐文章于 2022-10-26 19:24:35 发布

阅读量3k

点赞数

分类专栏：【初级】前端文章标签： css3 2D旋转 3D旋转 div

本文链接：https://blog.csdn.net/viciousdear/article/details/46277729

版权

【初级】前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css3实现 2D 3D 放大</title>
    <style type="text/css">
        div {
            background: #000;
            color: #fff;
            width: 100px;
            height: 100px;
            margin: 50px;
            display: inline-block;
            }

        /*2D旋转*/
        ._2D:hover  {
          -webkit-transition: all 0.5s ease-in-out;
          -webkit-transform: rotate(360deg); /*旋转度数自选，因为没有设定旋转次数为无限，所以当前动画只是旋转一次*/
            transition: all 0.8s ease-in-out;
        }
        /*3D旋转*/
        ._3D:hover  {
          -webkit-transform:rotateY(360deg);/*rotateY()以y轴为旋转中心开始旋转*/
            transition: all 2s ease-in-out;
        }

        /*放大*/
        .larger:hover  {
         -webkit-transform: scale(1.2);/*scale()内的参数可以选择大于1或者小于1，用来放大或者缩小原DIV*/
         transition: all 0.8s ease-in-out;
        }

    </style>
</head>

<body>
    <div class="_2D">2D旋转</div>
    <div class="_3D">3D旋转</div>
    <div class="larger">放大</div>
</body>
</html>