美文网首页
css--图片背面可见

css--图片背面可见

作者: 3e0a50393df8 | 来源:发表于2018-08-20 08:39 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背面可见</title>
    <style type="text/css">
        .con{
            width: 300px;
            height: 300px;
            margin: 50px auto 0;
            border: 1px solid #000;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: gold;
            text-align: center;
            line-height: 300px;
            font-size: 50px;
            transition: all 500ms ease;
            /*设置盒子按3d空间显示*/
            transform-style: preserve-3d;
            /*设置透视距离、三维旋转的初始角度*/
            transform: perspective(800px) rotateY(0deg);
            /*设置盒子背面是否可见*/
            backface-visibility: hidden;
        }
        .con:hover .box{
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="box">div元素</div>
    </div>
</body>
</html>

相关文章

  • css--图片背面可见

  • 前端(动画)

    变形中心 背面可见 图片翻面 animation动画 人物走路动画 多帧动画 loading动画

  • 前端(动画)

    变形中心点 背面可见 图片翻面 animation动画 多帧动画 今天小练习 loading动画

  • 2018-11-28

    变形 元素旋转 变形中心点 背面可见 图片翻面 animation动画 人物走路动画 多帧动画

  • 2019-06-04

    css基础知识 变形: 元素旋转 变形中心点: 背面可见 图片翻转: animation动画: 定义动画名称及形式...

  • css--图片变形

  • 背面可见与动画

    1、translate(x,y) 设置盒子位移 2、scale(x,y) 设置盒子缩放 3、rotate(deg)...

  • 移动端自适应处理-sprite

    我用的是在线的工具CSS Sprite Generator css--所有需要自适应图片的部分加上sprite类 ...

  • HTML-08day

    1、背面可见 2、变形 3、变形中心点 4、多帧动画 5、动画 6、过渡动画 7、图片翻页 8、文字遮罩 9、小人...

  • 前端笔记(8)

    代码:1.人物走路动画 2.元素旋转 3.变形中心点 4.图片文字遮罩 5.图片翻面 6.多帧动画 7.背面可见 ...

网友评论

      本文标题:css--图片背面可见

      本文链接:https://www.haomeiwen.com/subject/uvckiftx.html