CSS3 transform-style 属性
.demo_box{
background:none;height:300px;border:none;
}
.perspective{
position:relative;width:200px;height:200px;float:left;margin:100px;
-webkit-transform:perspective(300px);
-moz-transform:perspective(300px);
}
.m3d{
-moz-transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
}
.perspective span{
display:block;position:absolute;width:198px;height:198px;font-size:120px;line-height:198px;text-align:center;
background:rgba(0,0,0,0.2);border:1px solid #333; }
.front{
-webkit-transform:rotateY(0deg) translateZ(100px);
-moz-transform:rotateY(0deg) translateZ(100px);
}
.back{
-webkit-transform:rotateY(180deg) translateZ(100px);
-moz-transform:rotateY(180deg) translateZ(100px);
}
.right{
-webkit-transform:rotateY(90deg) translateZ(100px);
-moz-transform:rotateY(90deg) translateZ(100px);
}
.left{
-webkit-transform:rotateY(-90deg) translateZ(100px);
-moz-transform:rotateY(-90deg) translateZ(100px);
}
.top{
-webkit-transform:rotateX(90deg) translateZ(100px);
-moz-transform:rotateX(90deg) translateZ(100px);
}
.bottom{
-webkit-transform:rotateX(-90deg) translateZ(100px);
-moz-transform:rotateX(-90deg) translateZ(100px);
}
html:
<div class="demo_box">
<div class="perspective">
<span class="front">1</span>
<span class="back">2</span>
<span class="right">3</span>
<span class="left">4</span>
<span class="top">5</span>
<span class="bottom">6</span>
</div>
<div class="perspective m3d">
<span class="front">1</span>
<span class="back">2</span>
<span class="right">3</span>
<span class="left">4</span>
<span class="top">5</span>
<span class="bottom">6</span>
</div>
</div>
CSS3 transform-style 属性的更多相关文章
- css3 transform 变形属性详解
本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...
- JavaScript 读取CSS3 transform
某些场景需要读取 css3 transform的属性 例如 transform:translate(10px,10px) rotate(-45deg); 这该怎么读取呢,正则表达式?毫无疑问这很坑爹 ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- CSS3 transform 属性
CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- CSS3 Transform、Transition和Animation属性总结
CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...
- CSS3 : transform 与 transform-origin 属性可以使元素样式发生转变
CSS3 : transform 用于元素样式的转变,比如使元素发生位移.角度变化.拉伸缩小.按指定角度歪斜 transform结合transition可实现各类动画效果 transform : tr ...
- CSS3 transform对普通元素的N多渲染影响
一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...
- CSS3新增文本属性实现图片点击切换效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一个需求认识CSS3 的transform-origin属性
最近遇到一个需求,是以前做PHP的同事问我的问题 下面是他在百度发的问题截图 根据上面的截图,我稍微梳理了一下 问题:现在有个div,旋转45度后,这个div的宽度会动态改变,并且要向右上方偏移 ...
随机推荐
- Jenkins+Ansible+Gitlab自动化部署三剑客-gitlab本地搭建
实际操作 准备linux初始环境 关闭防火墙 systemctl stop firewalld 开机自己关闭 systemctl disable firewalld 设置安全配置 为关闭 vim /e ...
- python2.7 3.5 3.6 3.7 的不同
https://blog.csdn.net/kwame211/article/details/77862166/
- CSDN社区之星专訪:我的蜕变之路
摘要:社区之星第49期採訪了爱奇艺研发总监陆其明.他分享了个人生涯.管理和程序猿素质等方面的看法.管理上他觉得对人要领导.要管的是事.而在程序猿素质上.他则引用Jeff Atwood的话称,成为优秀程 ...
- centos7下安装docker(15.4跨主机网络-flannel)
flannel是CoreOS开发的容器网络解决方案,flannel为每一个host分配一个subnet,容器从这些subnet中分配IP,这些IP可以在host之间路由,容器无需NAT和port ma ...
- 使用ECharts来实现地图下钻功能(某省的市级下钻到县级)
var cityMap = { "长沙市": "430100", "株洲市": "430200", "湘潭市& ...
- Node.js之mysql增删改查
1.安装库 npm install mysql 2.编写db.js(用作公共模块) //连接MySQL数据库 var mysql = require("mysql"); var p ...
- log4net配置文件
<?xml version="1.0" encoding="utf-8"?> <configuration> <configSec ...
- CF960G Bandit Blues 第一类斯特林数、NTT、分治/倍增
传送门 弱化版:FJOI2016 建筑师 由上面一题得到我们需要求的是\(\begin{bmatrix} N - 1 \\ A + B - 2 \end{bmatrix} \times \binom ...
- [Spark][Python][RDD][DataFrame]从 RDD 构造 DataFrame 例子
[Spark][Python][RDD][DataFrame]从 RDD 构造 DataFrame 例子 from pyspark.sql.types import * schema = Struct ...
- java 基础03 继承