效果图：

彩千圣天下第一!(小声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. java可视化

    1.java关闭窗口代码. ft.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); IE打开  Weiler-Atherton任意多边形裁剪 http:/ ...

  2. C#分布式事务解决方案-TransactionScope(转)

    出处:C#分布式事务解决方案-TransactionScope 引用一下别人的导读:在实际开发工作中,执行一个事件,然后调用另一接口插入数据,如果处理逻辑出现异常,那么之前插入的数据将成为垃圾数据,我 ...

  3. BurpSuite安装和配置

    Burp Suite是什么 Burp Suite 是用于攻击web 应用程序的集成平台.它包含了许多Burp工具,这些不同的burp工具通过协同工作,有效的分享信息,支持以某种工具中的信息为基础供另一 ...

  4. UVa 1151 Buy or Build （最小生成树+二进制法暴力求解）

    题意:给定n个点,你的任务是让它们都连通.你可以新建一些边,费用等于两点距离的平方(当然越小越好),另外还有几种“套餐”,可以购买,你购买的话,那么有些边就可以连接起来, 每个“套餐”,也是要花费的, ...

  5. 递归，回溯和DFS的区别

    递归是一种算法结构,回溯是一种算法思想一个递归就是在函数中调用函数本身来解决问题回溯就是通过不同的尝试来生成问题的解,有点类似于穷举,但是和穷举不同的是回溯会“剪枝”,意思就是对已经知道错误的结果没必 ...

  6. [编译，报错以及其他] 有关C/C++中int不能用-2147483648当最小值的问题

    这个取决于今早看耗子叔的微博: 这里说到了int的取值范围的问题,int的取值是-2147483648 ~ 2147483647,但是如果直接在编译器(VS2013)中使用-2147483648会报错 ...

  7. Hadoop HDFS HA启动出现两个StandBy NameNode

    可能是zkfc服务没有启动,正确的流程如下: 1.在nn001上格式化zkfc sudo -u hdfs hdfs zkfc -formatZK 2.在三个(或以上)节点上启动journalnode ...

  8. JS控制输入框，输入正确的价格

    在HTML中,验证输入内容的正确性是提高用户体验的一方面,同时也是初步保证了数据的来源的正确性. 下面是一个常用的控制输入正确的价格的JS代码 function clearNoNum(obj) { o ...

  9. WPF：MVVM模式下ViewModel关闭View

    不外乎两种基本方法. 消息通知和参数传递. 一.消息通知 利用View里的IsEnable属性 原理是这样的: 1.UI中的IsEnabled绑定VM中的属性 2.UI的后台代码中,注册IsEnabl ...

  10. 浅谈TCP通讯

    基于Tcp协议的Socket通讯类似于B/S架构,面向连接,但不同的是服务器端可以向客户端主动推送消息. 使用Tcp协议通讯需要具备以下几个条件: (1).建立一个套接字(Socket) (2).绑定 ...