css32D、3D、动画、过渡

最新推荐文章于 2020-10-19 23:56:50 发布

weixin_48846877

最新推荐文章于 2020-10-19 23:56:50 发布

阅读量313

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_48846877/article/details/107924165

版权

一、css3里面的2D

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            margin: 250px auto;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            /*设置2D转化
            translate(x,y) 可以分开写，默认x
            translate优点：不会影响到其他元素的位置
            translate中的百分比单位是相对与自身元素的，对行内标签无效
            */
            /*transform:translateX(20px);*/

            /*
            scale (x,y)
            里面写的数字不跟单位就是倍数的意思，1就是1倍，0.5就是缩放
            优势：不会影响其他元素，可以设置中心点
            */
            /*transform: scale(0.5);*/

            /*
            变形
            skew   两个值  第一个  x水平倾斜   第二个  y  垂直倾斜
            一个值代表两个值
            */
            /*transform: skew(45deg,30deg);*/

            /*
            后两个是平移
            第二个第三个  scale
            第一个第四个  skew
            cos  角度 是顺时针走的
            */
            /*transform: matrix(0.866,1,1,0.866,0,0);*/


            /*
            rotate 角度为正顺时针旋转
            origin 设置旋转中心 默认选择中心点是元素的中心点
            x y 可以设置像素或方位名词
            */
            /*transform: rotate(45deg);*/
            /*transform-origin:50% 50%;*/

            /*
            综合写法：
            顺序会影响转换的效果（先旋转会改变坐标轴方向）
            同时有位移和其他属性的时候，最好将位移放到最前面
            */
            transform-origin: 50% 50%;
            /*transform: translatex(100px) rotatez(45deg) scale(.5);*/
            transform: rotatez(45deg) translatex(100px);
        }
    </style>
</head>
<body>
<!--
css3  动画    2d   3d  过渡   动画
2d:  translate 平移   rotate  旋转

最低0.47元/天解锁文章

weixin_48846877

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css32D、3D、动画、过渡

一、css3里面的2D<head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box{ margin: 250px auto; width: 200px; height: 200px; border: 1px solid #000;
复制链接

扫一扫