2D变换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>2D变换</title>
        <style type="text/css">
            .redDiv{
                width: 200px;
                height: 200px;
                background-color: red;
                margin-left: 100px;
                transition: all 1s;
                /*trandform:2D变换用得都是transform；
                 
                 rotate：旋转，可以给角度，
                 可以是负数*/
                /*transform: rotate(45deg);
                margin: 100px auto;*/
                
                /*translate 就是平移，平移的时候不会影响其他元素的位置（在文档流的位置不变，只是视觉上面会出现偏移）*/
                /*transform: translate(0px,100px);*/
                
                /*scale 缩放，缩放的时候，默认值是从中心向两边缩放，
                 也不影响其他元素*/
                /*transform: scale(2);*/
                
                
                /*skew 倾斜
                 倾斜的时候，会让文字也跟着倾斜，可以给文字嵌套块级标签，通过反倾斜（倾斜给负数）
                 来让文字变正*/
                /*transform: skewX(30deg);*/
            }
            /*p{
                transform: skewX(-30deg);
            }*/
            .redDiv:hover{
                /*transform-origin  可以修改变换的原点。（以那个个点为轴心去旋转）
                 可以设置英文字母  left top
                 可以设置像素  100px  0px
                 可以设置百分比  50% 0
                 
                 修改原点对于
                 平移没作用
                 对缩放、旋转、倾斜有作用*/
                transform-origin: 300px 100px; 
                transform: skew(50deg);
            }
            
        </style>
    </head>
    <body>
        <div class="redDiv"><p>123</p></div>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容