html5+css3立体正方形效果案例


<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">*{padding: 0;margin: 0;}.box{width:200px;height: 200px;margin: 100px auto;position: relative;/*让box默认旋转*/transform: rotate3d(1,1,0,-30deg);/*让子元素保留3d变换之后的效果*/transform-style: preserve-3d;/*添加透明景深效果*/perspective: 0px;/*设置透视的观察角度*/perspective-origin: 0px 0px;}.box > div{position: absolute;width:200px;height: 200px;opacity: 0.5;}.front{background-color: red;transform: translateZ(100px);}.back{background-color: green;transform: translateZ(-100px) rotateY(180deg);}.left{background-color: blue;/*移动加旋转*/transform: translateX(-100px) rotateY(-90deg);}.right{background-color: pink;transform: translateX(100px) rotateY(90deg);}.top{background-color: purple;transform: translateY(-100px) rotateX(90deg);}.bottom{background-color: orange;transform: translateY(100px) rotateX(-90deg);}</style></head><body><div class="box"><div class="front">front</div><div class="back">back</div><div class="left">left</div><div class="right">right</div><div class="top">top</div><div class="bottom">bottom</div></div></body>
</html>

html5+css3立体正方形效果案例相关推荐

分享一个非常有用的HTML5+CSS3响应式图片案例
随着Retina屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种 ...
怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）...
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
html5页面上下分栏,HTML5+CSS3 分栏效果
HTML5+CSS3 分栏效果在很多刊物.报纸.网页中,都会看到将文本内容分成几栏的效果.而columns属性就可以同时定义多栏的数目和每栏宽度等. 通过上述语法中,中文参数的含义,即可理解&quo ...
html怎么把字做成动画效果,如何使用HTML5 css3实现粒子效果文字动画特效（附完整代码）...
摘要腾兴网为您分享:如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码),学宝,小米社区,手机管家,神州专车等软件知识,以及小学英语点读机,便利宝,startos,工资宝,玩,大将军手 ...
ae制h5文字动画_如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
哈哈，又找到几个强大的html5+css3的动画效果
一周HTML5经典回顾 31个别出心裁的HTML5动画 40,425 人浏览发表回复 13 又是一周即将过去,我们来精心挑选这周分享的31款别出心裁的HTML5动画,很多还比较实用,一起来看看吧. ...
html5 css3实现幻灯片效果代码,CSS3实现的渐变幻灯片效果
实现效果代码 html CSS3: CSS3 delivers a wide range of stylization and effects, enhancing the web app with ...
html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
html5 相册系统php源码,HTML5 CSS3打造相册效果附源码下载
今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下. 效果图: 效果是不是还是很不错的,最主要的是没有使用一行j ...

html5+css3立体正方形效果案例

html5+css3立体正方形效果案例相关推荐

最新文章

热门文章