css3 3d效果案例：两面翻转的盒子

搭建html结构：

<div class=”front”>黑马程序员</div>

</div>

Box父盒子里面包含前后两个盒子

Box是翻转的盒子 front是前面的盒子 back是后面的盒子

实现步骤：

box指定大小，切记要添加3d呈现
back盒子要沿着y轴翻转180deg
最后鼠标经过box沿着y旋转180deg

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {perspective: 400px;}.box {position: relative;width: 300px;height: 300px;margin: 100px auto;transition: all 2s;transform-style: preserve-3d;backface-visibility: hidden;}.box div {text-align: center;line-height: 300px;font-size: 30px;color: white;position: absolute;width: 100%;height: 100%;border-radius: 150px;}.front {background-color: aqua;z-index: 1;}.back {background-color: pink;transform: rotatey(180deg);}.box:hover {transform: rotateY(180deg);}</style>
</head><body><div class="box"><div class="front">程序员</div><div class="back">i'm here</div></div>
</body></html>

css3 3d效果案例：两面翻转的盒子相关推荐

案例-两面翻转的盒子（CSS3）
案例-两面翻转的盒子(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset= ...
课堂案例之两面翻转的盒子
课堂案例之两面翻转的盒子 1 实现步骤 2 界面实现 1 实现步骤搭建HTML结构 box父盒子里面包含前后两个子盒子. box是翻转的盒子,front是前面盒子,back是后面盒子. <di ...
用css3 3d效果做一个立体盒子
想要做立方体的盒子需要了解几个知识点旋转 transform:rotate 基点的设置 transform-origin 3d设置 transform-style:preserve-3d 移动:t ...
一篇文章搞定css3 3d效果
css3 3d学习心得卡片反转魔方 banner图首先我们要学习好css3 3d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了. 首先先给大家看一个小例子: 卡 ...
css3 3d 与案例分析
作者:魔洁聊到3d那我们就先聊聊空间维度,首先一维,比如一条线就是一个一维空间,连点成线在这个空间里这些点只能前进后退,二维空间就是一个平面,这时点不仅可以前进后退还可以左右移动,3维空间也可以说是 ...
html3d轮播图片效果,CSS3,3D效果轮播图
---恢复内遇新是直朋能到分览支体调容开始--- 大家还的候通现端数是制这.效合应近环大过这业据记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮在重说 ...
CSS3 两面翻转的盒子
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
3D转换 —— 两面翻转盒子和3d导航栏
3d转换和2d转换的最大区别就是,2d是二维坐标系,是平面的,而3d是三维坐标系,具有空间感.立体感.在3d转换中,有两个特别重要的属性perspective.transform - style. p ...
CSS3 3D转换和旋转木马案例
文章目录前言有什么特点一.三维坐标系 3D转换二.3D移动translate3d 三.透视perspective 四.translateZ 五.3D旋转rotate3d 六. 3D呈现tran ...

css3 3d效果案例：两面翻转的盒子

css3 3d效果案例：两面翻转的盒子相关推荐

最新文章

热门文章