当前位置: 首页 > news >正文

css3 属性 backface-visibility 的实践应用

`backface-visibility` 是一个用于控制元素在面对屏幕不同方向时的可见性的CSS3特性。它有两个可能的值:

  1. visible:当元素不面向屏幕(即背面朝向用户)时,元素的内容是可以被看到的。
  2. hidden:当元素不面向屏幕时,元素的内容是不可见的,包括背面的部分。

效果:

 

<template><div>backface-visibility: hidden;<div class="all"><div class="one one_div">蓝色</div><div class="one two_div">橙色</div></div></div>
</template>
<script>
export default {data() {return {};},watch: {},created() {},methods: {},
};
</script>
<style lang='less' scoped>
.all {width: 300px;height: 200px;border: 1px solid red;position: relative;.one {position: absolute;top: 0;width: 100%;height: 100%;font-size: 30px;transition: transform ease 1s; /*动画的过渡*/&:first-child {z-index: 1;backface-visibility: hidden; /*背面隐藏*/}}&:hover .one {transform: rotateY(180deg);}.one_div {background: skyblue;}.two_div {background: orange;}
}
</style>

 

http://www.lryc.cn/news/292662.html

相关文章:

  • 嵌入式学习第十七天
  • 使用Python的Turtle模块简单绘制烟花效果
  • 数学建模-退火算法和遗传算法
  • Qt开源版 vs 商业版 详细比较!!!!
  • 华为云CodeArts Snap荣获信通院优秀大模型案例及两项荣誉证书
  • 小程序的应用、页面、组件生命周期(超全版)
  • TCP四次握手
  • EBC金融英国CEO:高波动性周期下,如何寻找市场的稳定性?
  • C++ Web 编程
  • docker笔记整理
  • 什么是git,怎样下载安装?
  • Camille-学习笔记-测试流程和测试设计
  • 【Python笔记-设计模式】建造者模式
  • 【LVGL源码移植】
  • 双非本科准备秋招(14.2)—— 进程与线程
  • 数据结构和算法笔记5:堆和优先队列
  • 第8章 SpringBoot任务管理
  • Qt5 基于OpenGL实现六轴机械臂三维仿真
  • 路由进阶
  • 分类预测 | Matlab实现SCN-Adaboost随机配置网络模型SCN的Adaboost数据分类预测/故障识别
  • 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之TextPicker组件
  • linux中vim的操作
  • 《统计学习方法:李航》笔记 从原理到实现(基于python)-- 第5章 决策树
  • 【C++11(一)】列表初始化and右值引用
  • 为什么SSL会握手失败?SSL握手失败原因及解决方案
  • STM32——智能小车
  • 开源:基于Vue3.3 + TS + Vant4 + Vite5 + Pinia + ViewPort适配..搭建的H5移动端开发模板
  • 缩略图保持加密(thumbnail-preserving encryption, TPE)的理论基础
  • nodejs+vue+mysql校园失物招领网站38tp1
  • GEDepth:Ground Embedding for Monocular Depth Estimation