(-1) 写在前面

我用的是chrome49,这个案例是从网上看到的,向这位同行致敬,建议大家在记录自己学习感悟时,向我一样加上笔名,被转载的时候还能留下点东西。

在研究slice-box.js的时候发觉自己需要3D转换的知识,了解之后感觉还是差点。

话说还没碰到一次web前端的面试,想当个实习生也不容易。一天又过去了啊!

(0)案例演示

(1)知识储备

a. perspective: 800px;

相当于镜头与被拍摄物体之间的距离,近大远小。

b. transform-style: preserve-3d;

这个值能让我们看到3d转换,默认值是flat只能看到平面的。

c.x、y、z轴

左手竖直代表y轴,右手水平代表x轴,z轴是即垂直x轴也垂直y轴的平行于地面的直线。

d. x、y、z轴的顺时针旋转

z轴的顺时针旋转等同于时钟秒针的顺时针旋转,我们拿食指沿着Z轴负方向模仿(指向屏幕方向),只要改变沿着坐标轴方向(x轴负方向指向左面,y轴负方向指向上面),就能体会其他两个轴的顺时针旋转了。

(2)代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset=utf-8>

<title>为了生活</title>

<style type="text/css">

.stage

{

perspective: 800px;

}

.container

{

width: 150px;

height:150px;

margin: 200px auto;

position: relative;

transform-style: preserve-3d;

height:200px;

transition:1s;

}

.container .side

{

position: absolute;

width: 150px;

height: 150px;

border:1px solid #0033FF;

text-align: center;

line-height: 150px;

}

.left

{

left:-152px;

transform: translateZ(-75px) rotateY(90deg);

transform-origin: right;

background:pink;

}

.right

{

left:152px;

transform: translateZ(-75px) rotateY(-90deg);

transform-origin: left;

background: black;

background-size:100% 100%;

}

.top

{

top:-152px;

transform: translateZ(-75px) rotateX(-90deg);

transform-origin: bottom;

background:green;

background-size:100% 100%;

}

.bottom

{

top:152px;

transform:translateZ(-75px)  rotateX(90deg);

transform-origin: top;

background:blue;

background-size:100% 100%;

}

.back

{

transform:translateZ(-75px);

background:orange;

background-size:100% 100%;

}

.front

{

transform:translateZ(75px);

background:red;

background-size:100% 100%;

}

.container:hover

{

transform: rotateY(360deg);

}

</style>

</head>

<body>

<div class="stage">

<div class="container">

<div class="side front">前</div>

<div class="side back">后</div>

<div class="side left">左</div>

<div class="side right">右</div>

<div class="side top">上</div>

<div class="side bottom">下</div>

</div>

</div>

</body>

</html>

(3)如何构建一个立体正方形

六个面的方块是重叠在一起的, 注意使用left等属性进行移动和使用translateX等属性进行移动有等价的时候也有不等价的时候,取决于tansform-origin属性。

front在z轴向前移动了75px;back在z轴向后移动75px.

left,使用left属性向左移动152px,沿着z轴向后移动75px,已transform-origin: right center 0为变换点沿y轴旋转的90deg,right ,沿着z轴向后移动75px,使用left属性向右移动152px,已transform-origin: left center 0为变换点沿着y轴旋转-90deg,

top使用top属性向上移动152px,沿着z轴向前移动75px,已transform-origin: center bottom 0;为变换点沿着x轴旋转-90deg,bottom使用bottom属性向下移动152px,已transform-origin: center top 0;为变换点沿着x轴方向旋转90deg。

至此一个立方体搭建好了。

(4)如何看到立体旋转的效果

transition:1s;这个属性是放在六个面的父元素container上,这种思想还应用在布局与控制上,我们旋转的是container,旋转的变换点也在这个平面,默认是transform:center center 0px;因为构建正方体方式的原因,y轴正好位于前后的中间,左右的中间!

(5)疑惑

a. perspective: 800px;

放在container会看到另外一种效果,我猜想是因为定位点变成container,那么在container前面的就会放大,后面就被缩小,从而导致其他几面的变化。可当后面旋转到前面时,后面的大小怎么不变换,哪位同行知道麻烦解答下

b.构建立体正方形还可以使用如下方式

.left{left:-152px;transform: rotateY(90deg);transform-origin: right;}

.right{left:152px;transform: rotateY(-90deg);transform-origin: left;}

.top{top:-152px;transform: rotateX(-90deg);transform-origin: bottom;}

.bottom{top:152px;transform: rotateX(90deg);transform-origin: top;}

.front{transform: translateZ(152px);z-index:2;}

.back{z-index:1;}

设置背景颜色后沿着X轴旋转,旋转到底部的会看到其他面都是底部的颜色,哪位同行知道麻烦解答下。

3d转换-正方体-Html5Css3-遁地龙卷风的更多相关文章

  1. CSS3带你实现3D转换效果

    前言 在css3中允许使用3D转换来对元素进行格式化,在原本只是2D转化的平面中引入了Z轴.在这之前我们讲解了css3中的2D转换,也就是二维空间变换,本篇的3D转换就是基于原来的2D转换而来,与2D ...

  2. CSS 3 学习——transform 3D转换渲染

    以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...

  3. jquery toggle方法使用出错?请看这里-遁地龙卷风

    这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function() { alert(1);//1,3,5,7... },function( ...

  4. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  5. 逻辑思维面试题-java后端面试-遁地龙卷风

    (-1)写在前面 最近参加了一次面试,对笔试题很感兴趣,就回来百度一下.通过对这些题目的思考让我想起了建模中的关联,感觉这些题如果没接触就是从0到1,考验逻辑思维的话从1到100会更好,并且编程简易模 ...

  6. JQuery data方法的使用-遁地龙卷风

    (-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage ...

  7. JQuery simpleModal插件的使用-遁地龙卷风

    (0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simpl ...

  8. CSS 3 3D转换

    绘制3D环境 父元素设置了 preserve-3d  子元素就可以以父元素作为平面进行3d转换 transform-style: preserve-3d; 设置视点 :表示透视效果  值越小 透视效果 ...

  9. css3学习总结8--CSS3 3D转换

    3D 转换 1. rotateX() 2. rotateY() otateX() 方法 通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转. 示例: div { transform ...

随机推荐

  1. [No0000A3]护眼谎言大揭秘,选择正确的方式保护眼睛!

    当眼睛因为过度劳累而状况频出的时候,许多人没有选择极目远眺.眼保健操.充分睡眠等简单易行的养眼方式,而是求助于各种护眼工具.于是,在视疲劳成为常见眼病之后,护眼市场产品层出不穷:护眼灯.眼贴.眼保仪. ...

  2. PAT 1045. 快速排序(25)

    著名的快速排序算法里有一个经典的划分过程:我们通常采用某种方法取一个元素作为主元,通过交换,把比主元小的元素放到它的左边,比主元大的元素放到它的右边. 给定划分后的N个互不相同的正整数的排列,请问有多 ...

  3. html5标签知多少

    此文为前段时间团队研究会出品,与小伙伴兮兮圆一起研究的成果,意外地上了公司km的今日推荐,今日挪过来,为新开张的博客先暖暖场吧. 一.常用标签 <header>.<footer> ...

  4. background-image和img的区别

    background-img的时候外边的div必须有宽和高.并且你只能决定图片位于你div的位置不能拉伸图片,或者改变图片的宽高.但是background-image是可以重复的,所以只要你的图片不是 ...

  5. Android -- 获取接口数据的三个方法

    1.   compile 'com.loopj.android:android-async-http:1.4.9': AsyncHttpClient client = new AsyncHttpCli ...

  6. win10使用技巧之如何打出偏僻字母

    一.背景 有时需要在打出一些希腊字母,诸如ɛ.μ等字符,如果输入法不支持该怎么办呢?在很多国产拼音软件中,都会提供扩展方便用户寻找这类字符,但是如果用户换过一款软件,可能要在一定时间找到这些字符就没那 ...

  7. Android——Adapter

    Adapter——本身只是一个接口.Adapter是将数据绑定到UI界面上的桥接类.Adapter负责创建显示每个项目的子View和提供对下层数据的访问. 数据适配器作用:把复杂的数据(数组.链表.数 ...

  8. SSH免密码登陆原理

    Master作为客户端,要实现无密码公钥认证,连接到服务器Salve上时,需要在Master上生成一个密钥对,包括一个公钥和一个私钥,而后将公钥复制到所有的Salve上.当Master通过SSH链接到 ...

  9. ui library

    https://github.com/twbs/bootstrap https://github.com/semantic-org/semantic-ui/ https://github.com/zu ...

  10. WdatePicker小结

    WdatePicker.js日期插件: 1. %y  当前年  %M  当前月  %d  当前日  %ld 本月最后一天  %H  当前时  %m  当前分  %s  当前秒 2.可以通过配置minD ...