CSS布局--transform应用（矩形旋转、缩放、倾斜、滚动、3D转换）代码

最新推荐文章于 2024-05-13 09:49:10 发布

陌听

最新推荐文章于 2024-05-13 09:49:10 发布

阅读量6.2k

点赞数 1

分类专栏： XHTML CSS 文章标签： css

本文链接：https://blog.csdn.net/she_rryn/article/details/47705843

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body, div {
            margin:0;
            padding:0;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: burlywood;
            margin-left: 50px;
            border: 1px solid red;
            display: inline-block;/*不换行，但是可以设置width跟height*/
        }
        /*
            translate(tx, ty)
            该函数设置html组件横向移动tx距离，纵向移动ty距离。如果ty省略那么，默认是0。
            translate(tx) -> translateX(tx)
            translate(ty) -> translateY(ty)
        */
        .translate-original {}
        .translate-now {
            -webkit-transform: translate(10px, 10px);
        }
        /*
            rotate(angle)单位是deg
            该函数设置html组件顺时针旋转angle角度
        */
        .rotate-now {

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

陌听

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS布局--transform应用（矩形旋转、缩放、倾斜、滚动、3D转换）代码

body, div { margin:0; padding:0; } div { width: 100px; height: 100px; background-color: burlywood; margin-left:
复制链接

扫一扫