效果图：

彩千圣天下第一!(小声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. 是什么优化让 .NET Core 性能飙升？（转）

    欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ .NET Core(开放源代码,跨平台,x-copy可部署等)有许多令人兴奋的方面,其中最值得称赞的就是其性能了. 感谢所有社区 ...

  2. POJ1258 Agri-Net 2017-04-14 15:51 55人阅读 评论(0) 收藏

    Agri-Net Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 56948   Accepted: 23615 Descri ...

  3. openfire搭建spackweb在线即时聊天

    1.首先去openFire官网下载openFire以及spackweb,以下地址可以2样东西一次打包下载.http://download.csdn.net/detail/a315157973/8048 ...

  4. 使用testNGListenter来自定义日志

    背景 用testNG写用例的时候,只是打印了请求的日志,没有打印这个用例的开始和结束的标识,想加上这个标识这样更好的排查问题 这种日志是加在用例开始执行和结束,相当于spring中的AOP功能,今天翻 ...

  5. 解决IIS中Login failed for user 'NT AUTHORITY\ANONYMOUS LOGON'.

  6. LESS+to+MCSS

    此文已由作者郑海波授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验 一.前言 虽然首页没有开始做,昨天仍决定将[MCSS](https://github.com/NetEaseW ...

  7. HTTP调用接口方法

    1.创建接口调用方法类 package cn.com.victorysoft.sjzx.Message; import java.io.BufferedReader; import java.io.I ...

  8. 1083 矩阵取数问题(DP)

    1083 矩阵取数问题 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 一个N*N矩阵中有不同的正整数,经过这个格子,就能获得相应价值的奖励,从左上走 ...

  9. ObjectARX动态添加AutoCAD传统下拉菜单入门篇(一)

    ObjectARX动态添加传统下拉菜单入门篇 图文by edata  , 转载注明出处 http://www.cnblogs.com/edata AutoCAD 添加传统下拉菜单有很多种方式,比较典型 ...

  10. PHP全局变量与SESSION 漏洞（global 与 session）

    先看这一段简单的代码 <?php session_start();$_SESSION[‘isadmin’]=’yes’;$isadmin=’no’;echo $_SESSION[‘isadmin ...