CSS transform 3D 变形

ife_设计师

No.4 - 3D 空间的卡片翻转动效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            position: relative;
            margin: 100px auto;
            width: 300px;
            height: 400px;
        }
        div img{
            position: absolute;
            left: 0;
            top: 0;
            backface-visibility: hidden; /*定义元素在不面对屏幕时不可见。*/
            transition: transform 2s;
            -moz-transition: -moz-transform 2s;	/* Firefox 4 */
            -webkit-transition: -webkit-transform 2s;	/* Safari 和 Chrome */
            -o-transition: -o-transform 2s;	/* Opera */
        }
        div .img2{
            transform:rotateY(-180deg);
            -ms-transform:rotateY(-180deg); 	/* IE 9 */
            -moz-transform:rotateY(-180deg); 	/* Firefox */
            -webkit-transform:rotateY(-180deg); /* Safari 和 Chrome */
            -o-transform:rotateY(-180deg); 	/* Opera */
        }
        div:hover .img1
        {
            transform:rotateY(180deg);
            -ms-transform:rotateY(180deg); 	/* IE 9 */
            -moz-transform:rotateY(180deg); 	/* Firefox */
            -webkit-transform:rotateY(180deg); /* Safari 和 Chrome */
            -o-transform:rotateY(180deg); 	/* Opera */
        }
        div:hover .img2
        {
            transform:rotateY(0deg);
            -ms-transform:rotateY(0deg); 	/* IE 9 */
            -moz-transform:rotateY(0deg); 	/* Firefox */
            -webkit-transform:rotateY(0deg); /* Safari 和 Chrome */
            -o-transform:rotateY(0deg); 	/* Opera */
        }

    </style>
</head>
<body>
<div>
    <img class="img1" src="正面.jpg" alt="正面" />
    <img class="img2" src="反面.jpg" alt="反面" />
</div>
</body>
</html>

来源：CSDN

作者：qq_42535842

链接：https://blog.csdn.net/qq_42535842/article/details/103732986

标签

transform

position

css

transition