CSS正方体背面不可见

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}body{/*搭建3D环境*/transform-style:preserve-3d;/*景深 近大远小*/perspective: 900px;}.box{width: 300px;height: 250px;border:4px solid #f00;margin: 200px auto;transition:1s;position:relative;transform:rotateY(30deg);/*搭建3D环境*/transform-style:preserve-3d;}/*.box img{width: 100%;height: 100%;display:block;position:absolute;transition:1s;*//*旋转之后展示的是背面 背面不可见*//*backface-visibility:hidden;*//*}*/.txt1{width: 300px;height: 250px;background: rgba(0,0,0,0.5);font-size:40px;line-height:200px;text-align:center;/*transform:rotateY(180deg);*/transition:1s;position:absolute;/*背面不可见*/backface-visibility:hidden;}.txt2{width: 300px;height: 250px;background: rgba(0,0,0,0.5);font-size:40px;line-height:200px;text-align:center;transform:rotateY(180deg);transition:1s;position:absolute;/*背面不可见*/backface-visibility:hidden;}/*.box:hover img{transform:rotateY(180deg);}*/.box:hover .txt1{transform:rotateY(180deg);}.box:hover .txt2{transform:rotateY(360deg);}</style></head><body><!--backface-visibility:背面不可见;visible    可见hidden    不可见--><div class="box"><!--<img src="img/2.png" alt="" />--><p class='txt1'>111</p><p class='txt2'>222</p></div><!--1: 图面默认在前面展示(初始不需要设置背面不可见)鼠标移上去,图片旋转到背面,设置背面不可见2: 文本默认在后面(初始旋转180deg)鼠标移上去,文字旋转到正面-->   </body>
</html>

CSS正方体背面不可见相关推荐

用css如何写正方体,css正方体实现--（transform练习）
昨天看过在看完transform后,想做一个正方体的效果. 昨天transform的笔记在这里源码在这里可以看到闭眼5秒钟脑子里预演了一遍大概咋写,然后就认为自己已经可以写出来了. 今天强迫自己去 ...
CSS——正方体360°旋转动画效果
先看效果: 代码如下: <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
使用Python中的Turtle库画正方体
使用Python中的Turtle库画正方体先献上画完之后的图形,还有些许瑕疵,例如虚线没有对齐,有待于后续微调以下是实现代码 # encoding=utf-8 import turtle# 画正面 ...
大厂h5开源视频系列-腾讯2012世界杯赛程魔方
前言大厂h5开源视频系列是一个专题,前两篇我们一起学习研究了京东,网易前端工程师对于h5的唯美细腻的态度,在这个专题中我们会解析一些酷酷的线上h5,在每一个细节,每一个细腻的过渡背后都能看到前端工 ...
vue3 斗兽棋游戏
近来掘金举办前端比赛,所以写了一个小游戏参加,而且熟悉一下vue3,写了一下游戏,思来想去就写了一个斗兽棋游戏. 欢迎去给我加油点赞评论收藏 ,试玩地址游戏地址童年斗兽棋 - 码上 ...
WebGL基础教程之三维透视投影
本教程转载自 https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-3d-perspective.html 此文上接WebGL系列文章,从基础 ...
用html和css做一个旋转的正方体
用html和css做一个旋转的正方体 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
css绘制正方体_设计师仅使用CSS绘制了8个标志性X战警
css绘制正方体 Here are three links worth your time: 这是三个值得您花费时间的链接: A designer drew 8 iconic X-Men using ...
3d正方体旋转相册代码_3d旋转正方体的多种html和css制作方法和相关知识复习讲解
1 说明: 1.1 推荐指数:★★★★ 1.2 有点长,适合收藏,慢慢仔细阅读和分析代码. 1.3 推荐:谷歌浏览器和微软vscode编辑器. 1.4 部分代码来源于免费开源的网络,具体不详,经自己加 ...

CSS正方体背面不可见

CSS正方体背面不可见相关推荐

最新文章

热门文章