css3翻牌效果及动画闪动

web修理工

已于 2022-01-21 11:09:57 修改

阅读量379

点赞数

分类专栏： css 文章标签： css3 动画前端

于 2020-05-30 16:04:19 首次发布

本文链接：https://blog.csdn.net/qq_42374676/article/details/106442736

版权

css 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

参考:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201504151686.html#:~:text=%E9%80%9A%E8%BF%87,backface-visibility%3Ahidden%3B%20%E5%B1%9E%E6%80%A7%EF%BC%8C%E6%88%91%E4%BB%AC%E5%8F%AF%E4%BB%A5%E4%BD%BF%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0%E5%9C%A8%E7%BF%BB%E8%BD%AC%E4%B9%8B%E5%90%8E%E6%B6%88%E5%A4%B1%EF%BC%8C%E8%BF%99%E6%98%AF%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%E5%8F%A6%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0%E6%94%BE%E5%9C%A8%E5%AE%83%E7%9A%84%E8%83%8C%E9%9D%A2%EF%BC%8C%E4%BB%8E%E8%80%8C%E5%88%B6%E4%BD%9C%E5%87%BA%E4%B8%80%E7%A7%8D%E5%85%83%E7%B4%A0%E7%BF%BB%E8%BD%AC%E4%B9%8B%E5%90%8E%E5%87%BA%E7%8E%B0%E5%8F%A6%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0%E7%9A%84%E6%95%88%E6%9E%9C%E3%80%82


<html>

<head>
    <title>3D翻牌效果 </title>
    <meta charset="UTF-8">
    <!-- <script type="text/javascript" src="jquery.js"></script> -->
    <style type="text/css">
        .outer {
            width: 510px;
            height: 340px;
            border: 1px red solid;
            margin: 0 auto;

        }

        .outer div {
            width: 510px;
            height: 340px;
            position: absolute;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            transition: all 2s;

        }

        .div1 {
            /* background: url("images/1.jpg"); */
            transform: rotateY(0);
            background-color: #f0f;
        }

        .div2 {
            /* background: url("images/2.jpg") no-repeat; */
            transform: rotateY(-180deg);
            background-color: aqua;
        }

        .outer:hover .div1 {
            transform: rotateY(-180deg);
           
        }

        .outer:hover .div2 {
            transform: rotateY(0deg);
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>

</html>

3d阴影处理


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css立体感测试</title>
    <style>
        #demo {
            display: inline-block;
            position: relative;
            margin: 50px;
            padding: 20px;
            background: #fafafa;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            -moz-border-radius: 4px;
            border-radius: 4px;
            color: rgba(0, 0, 0, 0.8);
            text-shadow: 0 1px 0 #fff;
        }

        #demo::before,
        #demo::after {
            position: absolute;
            content: "";
            top: 10px;
            bottom: 15px;
            left: 10px;
            width: 50%;
            box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
            -webkit-transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            -o-transform: rotate(-3deg);
            -ms-transform: rotate(-3deg);
            transform: rotate(-3deg);
            z-index: -1;
        }

        #demo::after {
            right: 10px;
            left: auto;
            -webkit-transform: rotate(3deg);
            -moz-transform: rotate(3deg);
            -o-transform: rotate(3deg);
            -ms-transform: rotate(3deg);
            transform: rotate(3deg);
        }

        #demo img {
            vertical-align: bottom;
        }
    </style>
</head>

<body>
    <div id="demo">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4280742740,1384799677&fm=26&gp=0.jpg" width="650" height="100" />
    </div>
</body>

</html>

处理css3 动画闪动效果

will-change: transform, opacity;

参考:https://www.cnblogs.com/yuzhongwusan/p/4186405.html

web修理工

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css3翻牌效果及动画闪动

<html><head> <title>3D翻牌效果 </title> <meta charset="UTF-8">  <style type="text/css"> .outer { width.
复制链接

扫一扫