效果图：

彩千圣天下第一!(小声bb)

代码:

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			.all {

				width: 505px;

				margin: 100px auto;

				overflow: hidden;

			}

			.block {

				width: 100px;

				height: 50px;

				position: relative;

				transform-style:preserve-3d ;

				transition: all 1s;

				float: left;

			}

			.block div {

				width: 100px;

				height: 50px;

				line-height: 50px;

				text-align: center;

				font-size: 20px;

			}

			.div1 {

				background-color: pink;

				transform: translateZ(25px);

			}

			.div2 {

				background-color: yellow;

				position: absolute;

				top: 0;

				left: 0;

				transform: rotateX(90deg) translateZ(25px);

			}

			.block:hover {

				transform: rotateX(-90deg);

			}

		</style>

	</head>

	<body>

		<div class="all">

			<div class="block">

				<div class="div1">cqs</div>

				<div class="div2">txdy</div>

			</div>

			<div class="block">

				<div class="div1">cqs</div>

				<div class="div2">txdy</div>

			</div>

			<div class="block">

				<div class="div1">cqs</div>

				<div class="div2">txdy</div>

			</div>

			<div class="block">

				<div class="div1">cqs</div>

				<div class="div2">txdy</div>

			</div>

			<div class="block">

				<div class="div1">cqs</div>

				<div class="div2">txdy</div>

			</div>

		</div>

	</body>

</html>

2019.4.24 3D效果滚筒导航练习的更多相关文章

  1. 网页3D效果库Three.js初窥

    网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...

  2. 视频特效制作：如何给视频添加边框、水印、动画以及3D效果

    2014-12-08 09:47 编辑: suiling 分类:iOS开发 来源:叶孤城的blog 招聘信息: iOS手机软件开发工程师 iOS工程师 Web后端高级开发工程师 iOS软件工程师 ja ...

  3. 3D立体菜单导航

    今天在微博里面看到别人分享的一个立体效果,我觉得挺好的,就拿下来自己存着,万一以后用到. 效果如下: index.html <!DOCTYPE html> <html > &l ...

  4. 3d效果的图片轮播

    CSS3的3d变换 CSS3给我们提供了一个新的功能,那就是3d变换.3d变换和2d变换的基本API函数类似,只不过多了些在Z轴上的操作,不难使用. 但是,为了让元素拥有3d变换的功能,我们需要给他的 ...

  5. jQuery旋转木马仿3D效果的图片切换特效代码

    用jQuery实现的一款仿3D效果的图片切换特效代码,类似旋转木马一样,幻灯图片以三维视觉上下滑动切换,效果很酷炫,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜 ...

  6. CSS3打造3D效果——perspective transform的深度剖析

    声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文.想看更详细 更专业的剖析请看张鑫旭的博文. 昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了 ...

  7. Android 抽屉效果的导航菜单实现

    Android 抽屉效果的导航菜单实现 抽屉效果的导航菜单 看了很多应用,觉得这种侧滑的抽屉效果的菜单很好. 不用切换到另一个页面,也不用去按菜单的硬件按钮,直接在界面上一个按钮点击,菜单就滑出来,而 ...

  8. CSS3 文本3D效果

    代码如下: <!DOCTYPE html> <html> <head> <style> h1 { color: #3D3D3D; font-size: ...

  9. css3 3d效果及动画学习

    css参考手册: http://www.phpstudy.net/css3/ http://www.css88.com/book/css/ 呈现3d效果:-webkit-transform-style ...

随机推荐

  1. Composer安装和使用 - Windows

    记录windows下安装和使用Composer的方法 1,使用安装程序 这是将 Composer 安装在你机器上的最简单的方法. 下载并且运行 Composer-Setup.exe,它将安装最新版本的 ...

  2. 8 求s=a+aa+aaa+aaaa+aa...a的值

    题目:求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字. * 例如2+22+222+2222+22222(此时共有5个数相加),几个数相加有键盘控制.程序分析:关键是计算出每一项的 ...

  3. UVa 1599 Ideal Path （两次BFS）

    题意:给出n个点,m条边的无向图,每条边有一种颜色,求从结点1到结点n颜色字典序最小的最短路径. 析:首先这是一个最短路径问题,应该是BFS,因为要保证是路径最短,还要考虑字典序,感觉挺麻烦的,并不好 ...

  4. Kinect-for-Windows-SDK开发

    微软的黑科技,应用在游戏或者科研领域.可以类似于双摄像头三维成像.

  5. [label][WorldPress] 一个很方便查找定位WorldPress源代码位置的网址

    作为 WordPress 的新手,根本不熟悉那些函数究竟是什么作用的,所以就必须要去看源代码. 要去查看源代码,那么你就必须要熟悉 WordPress 下面文件的作用,以及那个文件中定义了有哪些函数? ...

  6. 个人整理的一些iOS Entitlements

    收集了不少Entitlement,当然也肯定有遗漏.有的就是key的字面意思,就不多做解释.不过有的虽然字面意思好理解,不过具体的用处不太清楚,就写的Unknown use.在替换entitlemen ...

  7. visual studio code中使用emmet插件在.vue文件失效

    使用visual studio code编辑.vue文件时,emmet插件无法使用,可以通过以下两种试解决: 1.文件→设置,在右侧窗口添加以下代码: "emmet.syntaxProfil ...

  8. CentOS 7安装OpenVPN

    命令很简单,但是网上似乎没资料,只有RHEL6以下的资料. 直接贴命令: 1 2 3 4 5 cd ~ wget http://swupdate.openvpn.org/as/openvpn-as-2 ...

  9. [Oracle]Oracle部分函数

    1.nvl(a,b) 若a为null,则b 2.to_char(date,'YY-MM-DD') 按格式将date类型转为字符串 to_date('1999/1/1','YY-MM-DD') 将字符串 ...

  10. linux学习之vi文件编辑命令

    如果文件为只读则无法使用普通用户编辑,需要切换到root用户,具体名称可参考: https://www.cnblogs.com/huangwei1992/p/9493443.html vi文件编辑命令 ...