transform-style的3d效果是给元素父级添加还是给使用此效果的元素添加

以下几项属性对于浏览器的兼容很不好.1.transform:rotate(45deg)2.border-top-left-radius该属性允许您向元素添加圆角边框3.border-radius该属性允许您向元素添加圆角边框4.box-shadow属性向框添加一个或多个阴影5.text-shadow属性向文本设置阴影6.transition为了更好的兼容各个浏览器,需要加上前缀.-o-/*Opera浏览器*/-webkit-/*Webkit内核浏览器Safariandchrome*/-ms-/*IE9*/-moz-/*Firefox浏览器*/1.transform:rotate(45deg)通过transform属性使对象旋转,其中(45deg)是旋转的角度transform:rotate(45deg)-ms-transform:rotate(45deg)/*IE9*/-o-transform:rotate(45deg)/*Opera浏览器*/-webkit-transform:rotate(45deg)/*Webkit内核浏览器Safariandchrome*/-moz-transform:rotate(45deg)/*Firefox浏览器*/2.border-top-left-radiusborder-radius该属性允许您向元素添加圆角边框前者可以选择添加圆角边框的位置border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radiusborder-top-left-radius该属性允许您向元素添加圆角胡念边框,与border-radius一样,只是可以控制需要添裤唯困加圆角边框的位置.3.box-shadow属性向框添加山或一个或多个阴影,text-shadow属性向文本设置阴影box-shadow:h-shadow||v-shadow||blur||spread||color||inset属性:水平阴影的位置||垂直阴影的位置||模糊距离||阴影尺寸||阴影颜色||将外部阴影(outset)改为内部阴影box-shadow:1px1px3px#292929text-shadow:h-shadow||v-shadow||blur||colortext-shadow:0px-1px0px#0004.transitionproperty||duration||timing-function||delay规定设置过渡效果的CSS属性的名称||规定完成过渡效果需要多少秒或毫秒||规定速度效果的速度曲线||定义过渡效果何时开始目前所有浏览器都不支持transition属性。ease默认。动画以低速开始，然后加快，在结束前变慢.ease-in动画以低速开始.ease-out动画以低速结束ease-in-out动画以低速开始和结束transition:background5seaseONEEG:

转换（transform）

transform 是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放。

要想学好2D和3D转换要先对 坐标 有一定了解

2D

2维坐标系

2D转换中的 属性

在使用转换是我们要先给元素添加转换属性 transform(x,y)，X代表X轴，Y代表Y轴

1.移动 translate

当我们要移动盒子时，可以给盒子添加  transform:translate(50px,50px) 属性 让盒子做到移动效果(小括号里可以使用百分比%)

2.旋转 rotate

旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

给元素添加转换属性  transform:rotate(30deg)  ，这里小括号里可以写正值也可以写负值，但单位一定是 deg ，正值就是顺时针旋转，负值则相反

3.旋转中心 transform-origin

可以修改属性旋转式的中心点

origin：原点，如果与rotate旋转配合使用，就是旋转的中心点。如果与scale配合使用，就是缩放的基准点。

transform-origion里的值可以写 百分比% ，方位名词，单位px和0

4.缩放 scale

缩放，顾帆备名思义，可以放大和缩小。 只要给元素态带毁添加上了这个属性就能控制它放大还是缩小

** transform:scale(x,y)** 这里的X、Y 代表的即使方向 ，但在小括号里的值是  原先盒子行纯大小的 倍数

3D

3维坐标

3D和2D的不同点就是，在3D中增加了一个  Z轴  Z轴可以看做是 平常正对着我们的方向

在学习3D之前我们要先在大脑中产生一个 三维的方向感

3D中的属性

和2D一样 在3D中也有 移动 translate  旋转 rotate  当然也有新增属性  视距 perspertive

1.移动 translate

3D中的移动和2D中的移动是一样的，只是增加了一个 Z轴 方向的移动，当我们想要在 Z轴 方向移动时，给元素添加**translform:translateZ(100px)**即可 移动后我们会看到盒子明显变大了，这里盒子变大并不是 宽度和高度 上的变大，是这个盒子  距离我们的眼睛更近了

我们可以用  translate3d(x,y,z)  来实现和写 注意：小括号里的顺序一定不要错

2.旋转 rotate

3D里的旋转是  沿着某一个轴进行旋转  X、Y、Z 每个轴的旋转方式都不一样，我们可以用 左手定则 来记旋转

X轴就像单杠运动员，Y轴就像跳钢管舞的姑娘，Z轴就像抽奖游戏

3.3D呈现 transform-style

上面的属性并不能给我们3D的感觉 要想在页面中看到3D效果需要，给要做3D效果的元素的父级添加  transform-style: preserve-3d  真3D

属性是可以培养的

培养需要的材料是碎玉和对启乎应属性的五行石

在背包中5块同一属性品阶的岩首五行石可以合成一块高品阶同悄枣悉一属性五行石。

达到规定数量、品阶的五行石和规定数量的碎玉就可以对当前的属性进行养成

巫忧传奇 为你解答

这个也好玩

---