欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS transform 3D 变形

程序员文章站 2024-03-16 21:29:16
...

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>
相关标签： css动画效果

上一篇： 微信小程序----真机预览黑屏解决方法

下一篇： js实现文字滚动效果

推荐阅读