zoukankan html css js c++ java

css3 2D变换 transform

旋转函数rotate()，deg表示度数，transform-origin表示旋转的基点

<head>
    <title>无标题文档</title>
    <style>
        body{height:400px;border:1px solid #000;}
        .box{width:100px;height:100px;background:red;margin:100px auto 0; transition:2s;}
        body:hover .box{ -webkit-transform:rotate(360deg);}
    </style>
</head>
<body>
    <div class="box">111</div>
</body>

斜切，将矩形等形状扭曲，skewX(100deg),skrewY(30deg),以及x方向和y方向都斜切skew(15deg, 30deg)

<head>
    <title>无标题文档</title>
    <style>
        body{height:400px;border:1px solid #000;}
        .box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;}
        body:hover .box{ -webkit-transform:skewX(45deg);}
    </style>
</head>
<body>
    <div class="box">111</div>
</body>

缩放，scale()

<head>
    <title>无标题文档</title>
    <style>
        body{height:400px;border:1px solid #000;}
        .box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;}
        body:hover .box{ -webkit-transform:scale(2);}
    </style>
</head>
<body>
    <div class="box">111</div>
</body>

位置移动，translate(100px 200px)，translateX(100px)，translateY(200px)

<head>
    <title>无标题文档</title>
    <style>
        body{height:400px;border:1px solid #000;}
        .box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;}
        body:hover .box{ -webkit-transform:translate(-100px,200px);}
    </style>
</head>
<body>
    <div class="box">111</div>
</body>

查看全文

相关阅读:
典型用户模版和场景
 第一冲刺阶段——个人工作总结05
第一冲刺阶段——个人工作总结04
第一冲刺阶段——个人工作总结03
第一冲刺阶段——个人工作总结02
第一冲刺阶段——个人工作总结01
学习进度条7
构建之法阅读笔记06
个人总结
 第十六周进度条

原文地址：https://www.cnblogs.com/donghualei/p/4872137.html