温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

trasition,transform,旋转

发布时间:2020-06-11 11:03:03 来源:网络 阅读:323 作者:matengbing 栏目:开发技术

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            margin: 100px;

        }

        .div1{

            width: 200px;

            height: 150px;

            transform: rotate(30deg);

            background-color: antiquewhite;

            color: chartreuse;

        }

        .div2{

            width: 800px;

            height: 400px;

            background-color: black;

            /*opacity: 0.3;*/

            position: absolute;

            bottom: 20px;

            right: 100px;

            color: chartreuse;

        }

        .img_div{

            width: 30px;

            height: 30px;

            float: right;

            background: url("res/p_w_picpaths/close.jpg") no-repeat;

            /*将背景图片设置和div一样大小,否则旋转旋转岁div旋转,图片的效果就不是绕中心旋转*/

            background-size: 30px;

            transition: 500ms;


        }


        .img_div:hover{

            transform: rotate(405deg);


        }

        .div3{

            width: 200px;

            height: 200px;

            background-color: blueviolet;

            transition: 1s;

        }

        .div3:hover{

            transform: translate3d(0px,-12px,0px);

            box-shadow: 0px 14px 0px rgba(0,0,0,.5);

        }

    </style>

</head>

<body>

    <div class="div1">

        顺时针旋转(绕中心)30度 transform: rotate(30deg);

    </div>


    <div class="div2">

        <div class="img_div">


        </div>

        transform: rotateX(405deg);  顺时针旋转(绕x轴)30度

        <hr>

        transform: rotateY(405deg);  顺时针旋转(绕y轴)30度

        <hr>

        translate(x,y,z)            指定元素在三维空间偏移

     </div>


    <div class="div3"></div>

</body>

</html>


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI