2D转换-CSS

CSS3中增加了2D转换模块，现用这些知识实现一下小demo,记录学习历程。





2D转换-CSS



 

如上图，鼠标放上去,扑克牌缓缓倒下的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D转换-CSS</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            width: 310px;
            height: 438px;
            border: 1px solid #000;
            background: skyblue;
            margin: 100px auto;
            /*设置透视效果，px越小表示离的越近效果越强烈，px越大表示离的越远效果就越不明显*/
            perspective: 500px;
        }
        img{
            /*这个是过渡的用法，transform表示需要过渡的属性，1s过渡需要的时长*/
            transition: transform 1s;
            /*这个是锚点的概念，中下点作为锚点*/
            transform-origin: center bottom;
        }
        /*hover属性 表示鼠标悬浮在div上对img做了效果*/
        div:hover img{
            /*2D转换的方法：围绕 X轴旋转80度，并与上面的锚点配合使用*/
            transform: RotateX(80deg);
        }
    </style>
</head>
<body>
    <div><img src="img/pk.png" alt=""></div>
</body>
</html>