效果图：

彩千圣天下第一!(小声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. 如何用Python实现常见机器学习算法-4

    四.SVM支持向量机 1.代价函数 在逻辑回归中,我们的代价为: 其中: 如图所示,如果y=1,cost代价函数如图所示 我们想让,即z>>0,这样的话cost代价函数才会趋于最小(这正是 ...

  2. TCP端口状态说明ESTABLISHED、TIME_WAIT

    TCP状态转移要点 TCP协议规定,对于已经建立的连接,网络双方要进行四次握手才能成功断开连接,如果缺少了其中某个步骤,将会使连接处于假死状态,连接本身占用的资源不 会被释放.网络服务器程序要同时管理 ...

  3. Atom 编辑器侧边栏忽略隐藏文件

    设置中配置需要忽略的文件后缀 package中找到treeview,勾选上这个配置就行

  4. 用JQ去实现一个轮播效果

    前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body> <div class="pic"> <div ...

  5. linux每天一小步---cp命令详解

    1 命令功能      cp命令用于复制文件或者目录,cp是copy的缩写. 2 命令语法 cp  [参数] 源文件或者目录  目的文件或者目录 3 命令参数 -a  等同于-dRp,保存所有 -d ...

  6. 命令行传递参数并排序 AS实现加法

    题目:从命令行输入参数并进行排序 1.实验准备 Integer提供了能在 int 类型和 String 类型之间互相转换的方法,还提供了处理 int 类型时非常有用的其他一些常量和方法. static ...

  7. [Yii2]yiisoft/yii2 2.0.2 requires bower-asset/jquery 2.1.*@stable | 1.11.*@stable -> no matching package found

    composer require "dektrium/yii2-user:0.9.*@dev" 一直安装失败,提示:Your requirements could not be r ...

  8. linux常见命令-查看磁盘空间

    linux查看磁盘使用情况命令 1. 统一每个目录下磁盘的整体情况: df -h 2. 查看指定目录,在命令后直接放目录名,比如查看“usr”目录使用情况:df -h  /usr/ 3. 查看当前目录 ...

  9. 基于Extjs的web表单设计器 第二节——表单控件设计

    这一节介绍表单设计器的常用控件的设计. 在前面两章节的附图中我已经给出了表单控件的两大分类:区域控件.常用控件.这里对每个分类以及分类所包含的控件的作用进行一一的介绍,因为它们很重要,是表单设计器的基 ...

  10. 浅谈 温故知新——HTML5！

    古人有云:温故而知新.活到老,学到老,作为一枚前端的程序猿,不停的学习能够让我们对我们的技术有一个更加丰富的认识.这几天,项目已经完成,但我发现自己的知识体系存在一些短板,特别是在H5方面,所以我又回 ...