CSS高级技巧（5）2D 变形、3D变形、开门示例、硬币3D翻转示例

最新推荐文章于 2022-03-31 00:29:59 发布

克罗地亚狂想曲

最新推荐文章于 2022-03-31 00:29:59 发布

阅读量452

点赞数

分类专栏： web前端文章标签： css3

本文链接：https://blog.csdn.net/u010963053/article/details/105846593

版权

本文详细介绍了CSS3中的2D和3D变形技巧，包括旋转、缩放、倾斜以及如何设置旋转中心轴。3D变形部分通过左手法则解释了X、Y、Z轴的方向，并探讨了透视原理和移动效果。文中给出了具体的开门效果和硬币3D翻转的示例，帮助读者深入理解这些概念。

摘要由CSDN通过智能技术生成

2D 变形 transform

实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式配合过渡和其它动画，取代大量只能靠Flash才可实现的效果

旋转：translate

缩放：rotate

倾斜：skew

设置旋转中心轴：transform-origin

<html>
<head> 
    <style>
    div {
        width: 200px;
        height: 100px;
        background-color: pink;

        transition: all 0.5s;
        
        transform-origin: left top; /* 2 旋转中心的为左上角 */
        transform-origin: 10px 10px; /* 2 也可以设置精确数值 */

    }
    div:active {    /* 鼠标点击，马上变化（鼠标未松开就触发） */
        transform: translate(50px,50px);    /*1 移动*/
        /* transform: translate(50%);      若移动%，则移动自己的width的百分比*/

        transform: scale(0.8,0.1);    /*缩放*/
        /*  transform: scaleX(0.8);    
            transform: scaleY(0.8);    */

        transform: rotate(45deg);   /* 2 旋转 deg度数 */

        transform: skew(30deg,0deg);    /*3 倾斜,第二个参数不写默认0，取值正负皆可*/
        transform: skew(30deg);     
    }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

3D变形

左手法则--手背朝向自己竖食指（Y轴），右横大拇指*X轴），中指朝前（Z轴）

最低0.47元/天解锁文章

克罗地亚狂想曲

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS高级技巧（5）2D 变形、3D变形、开门示例、硬币3D翻转示例

2D 变形 transform实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式配合过渡和其它动画，取代大量只能靠Flash才可实现的效果旋转：translate缩放：rotate倾斜：skew<html><head> <style> div { width: 200px; height:...
复制链接

扫一扫

专栏目录