效果图：

彩千圣天下第一!(小声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. 不要怂，就是GAN (生成式对抗网络) （三）：判别器和生成器 TensorFlow Model

    在 /home/your_name/TensorFlow/DCGAN/ 下新建文件 utils.py,输入如下代码: import scipy.misc import numpy as np # 保存 ...

  2. serialVersionUID的作用以及IDEA、Eclipse如何自动生成serialVersionUID

    说到serialVersionUID,首先要讲讲序列化. 序列化: 序列化可以将一个java对象以二进制流的方式在网络中传输并且可以被持久化到数据库.文件系统中,反序列化则是可以把之前持久化在数据库或 ...

  3. 整理Javascript基础数据和引用数据复制值的问题

    Javascript数据分为两大类:1.基础类型(原始类型数据) 2.引用类型.他们的存储方式是不同的 基础类型的数据存储是保存在栈内存中的: 例如: var a=1; var b=a; var a= ...

  4. Hdu1560 DNA sequence（IDA*） 2017-01-20 18:53 50人阅读 评论(0) 收藏

    DNA sequence Time Limit : 15000/5000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total ...

  5. 使用VPD解决EBS中信息屏蔽问题

    本文描述的是2005年在一个项目中采用Oracle VPD技术解决同一个OU下按照不同办事处屏蔽销售订单的解决方案. VPD技术提供了数据库对象(表,同义词,视图)行级别访问的控制.关于VPD更多的信 ...

  6. centos 虚拟机中修改屏幕分辨率

    1.$ vi /boot/grub/grub.conf(路径可能会不一样,也可以是 /etc/grub.conf),打开grub.conf文件 2.我们修改分辨率,需要在kernel那行加入 vga= ...

  7. Webservice发布

    此文甚好,转载自:http://blog.163.com/java_player@126/blog/static/127930738200981555021925/ 某些地方笔者已经加以改进. 使用工 ...

  8. Jenkins HA高可用参考

    商用版Jenkins(CloudBee)提供HA插件,开源版本可以借助etcd服务发现+心跳脚本+sync的方式实现高可用.

  9. （zxing.net）一维码EAN 8的简介、实现与解码

    一.简介 一维码EAN 8:属于国际标准条码,由8个数字组成,属EAN的简易编码形式(EAN缩短码).当包装面积小于120平方公分以下无法使用标准码时,可以申请使用缩短码. 依结构的不同,EAN条码可 ...

  10. Devexpress GridControl无限高度惹得祸

    异常提示: issue, place the grid into a container that will give a finite height to the grid, or manually ...