首页 > 其他分享 >两面盒子翻转(backface-visibility)

两面盒子翻转(backface-visibility)

时间:2023-07-20 11:26:38浏览次数:36  
标签:背面 元素 3D backface visibility 翻转 属性

一、使用CSS3 3D翻转2面盒子,始终不显示底部的盒子,最后查询得知是需要加上backface-visibility属性

Backface-visibility是一个CSS属性,用于指定元素背面的可见性。

当一个元素在3D空间中旋转或倾斜时,它的背面有时会显示出来。默认情况下,背面是可见的,即使它在视觉上被其他元素遮挡了。

通过使用backface-visibility属性,可以控制元素背面的可见性。该属性有两个可能的值:

visible: 默认值,元素的背面是可见的。
hidden: 元素的背面是隐藏的,即不可见的。这意味着无论元素是如何旋转或倾斜的,背面都不会显示出来。
使用backface-visibility属性可以在一些场景下非常有用,例如在创建3D动画时,当元素背面不需要显示时,可以将其设置为hidden以提高性能和视觉效果。
需要注意的是,backface-visibility属性只适用于进行3D变换的元素,如使用CSS的transform属性进行旋转、倾斜等操作的元素。对于未应用任何3D变换的元素,backface-visibility属性不会产生任何效果。

二、简单理解就是:用于定义当元素不面向屏幕时是否可见的

二、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all 1s;
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotate3d(0,1,0,180deg);
        }

        .front,
        .back {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            text-align: center;
            line-height: 300px;
        }

        .front {
            background-color: pink;
        }
        .back {
            background-color: coral;
            transform: rotateY(180deg);
            /*重点是下面这句*/
            backface-visibility: hidden;
        }
    </style>

</head>
<body>
    <div class="box">
        <div class="front">轻轻的我走了</div>
        <div class="back">正如我轻轻的来</div>
    </div>
</body>
</html>

三、当如何不在.back 下面加backface-visibility: hidden时,可以看看是什么效果
image

四、加了后的默认显示
image

标签:背面,元素,3D,backface,visibility,翻转,属性
From: https://www.cnblogs.com/bangbangzoutianya/p/17567707.html

相关文章

  • AEE P2随身记录仪:180°翻转镜头,后置摄像头秒变前置
    DSJ-P2为AEE推出的新款随身音视频记录仪,主打小巧便携,整机尺寸只有104*35*17mm,净重仅58g,非常适合长时间随身携带的用户。除了小巧轻薄之外,P2的最大亮点就是拥有一颗可180度翻转摄像头,既让P2外观更加简约,又解决了前置摄像头像素不足的问题。搭配4800万拍照像素和1080P高清摄录,支持120......
  • 数据增强之裁剪、翻转与旋转
    文章和代码已经归档至【Github仓库:<https://github.com/timerring/dive-into-AI>】或者公众号【AIShareLab】回复pytorch教程也可获取。数据增强DataAugmentation数据增强又称为数据增广,数据扩增,它是对训练集进行变换,使训练集更丰富,从而让模型更具泛化能力。技巧:debugconsole......
  • 【高斯消元】 HDOJ 5257 翻转游戏
    如果第一行的状态确定了,那么矩阵的所有状态也会随之确定。。。那么我们就将第一行写成变量,这样能够推出矩阵的m个方程。。。然后对于k,可以写出k个限制方程。。因此我们总共列出m+k个方程,高斯消元,bitset优化即可。。。#include<iostream>#include<queue>#include<stack>#inclu......
  • LeetCoe-25-K个一组翻转链表
    25题:K个一组翻转链表题目给你链表的头节点head,每 k 个节点一组进行翻转,请你返回修改后的链表。k是一个正整数,它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍,那么请将最后剩余的节点保持原有顺序。你不能只是单纯的改变节点内部的值,而是需要实际进行节点交换......
  • 剑指 Offer 58 - I. 翻转单词顺序
    输入一个英文句子,翻转句子中单词的顺序,但单词内字符的顺序不变。为简单起见,标点符号和普通字母一样处理。例如输入字符串"Iamastudent.",则输出"student.aamI"。示例1:输入:"theskyisblue"输出: "blueisskythe"示例2:输入:" helloworld! "输出: "worl......
  • Appnium报错TypeError: visibility_of_element_located() takes 1 positional argumen
    报错信息: 原因:类型错误,visibility_of_element_located()方法需要1个参数位,但提供了两个解决方法:添加括号!让其成为一个整体 ......
  • 代码随想录算法训练营第十三天| 层序遍历 226.翻转二叉树 (优先掌握递归) 101. 对
    层序遍历注意:1,使用队列的形式,依次入队,同时对队列进行计数2,知道数目消失,才进行下一个队列代码:1vector<vector<int>>levelOrder(TreeNode*root)2{3vector<vector<int>>result;4if(root==NULL)returnresult;5queue<TreeNode*>selected;6......
  • 翻转二叉树
    给你一棵二叉树的根节点root,翻转这棵二叉树,并返回其根节点。示例1:输入:root=[4,2,7,1,3,6,9]输出:[4,7,2,9,6,3,1]示例2:输入:root=[2,1,3]输出:[2,3,1]示例3:输入:root=[]输出:[]来源:力扣(LeetCode)链接:https://leetcode.cn/problems/invert-binary-tree著作权归......
  • Simdroid 结构非线性测试:悬臂梁翻转
    问题描述几何: 材料:线弹性,弹性模量2.1e11,泊松比0。边界条件:点B固支,整体约束z方向位移。荷载:点A施加弯矩M。其中E为弹性模量,I为截面惯性矩。单元:此处选择Hex20单元,30*2个单元,厚度方向布置两层。采用梁和壳单元的测试将在后续文章中发布。连接:由于采用了实体单元,需要在悬臂梁自由......
  • 3d翻转动画 vue3 ts
    <template><section><divclass="flip-container"><divclass="cards":class="{flipped:isFlipped}"><divclass="front"></div><......