css33d旋转,css实现3d旋转
目录
CSS3盒型号a. CSS3过滤器过滤器b。CSS3 calc函数c. CSS3过渡2D转换二维坐标系1。移动平移2。旋转3。中心点变换-原点4。规模5。2D转换综合写作CSS3动画1。动画的基本用法.用关键帧定义动画(类似于定义选择器)b .对元素2使用动画。动画的共同属性3。动画速记属性3D转换速度曲线细节1。位移平移3d2。透视(单位px)3。旋转rotate3d4。在发现CSS3如此易于使用之前，3D呈现变换风格(重要)
CSS3盒子模型
CSS3可以通过确定箱子尺寸来指定箱子型号。有两个值，可以指定为content-box和border-box，因此计算框大小的方式发生了变化。
框大小：内容框框大小为宽度填充边框(默认)box-sizing: border-box，框大小为宽度(前提是填充和边框不超过宽度)* { margin:0；填充：0；框大小：边框-框；}
a. CSS3滤镜filter
filter CSS属性将图形效果(如模糊或颜色偏移)应用于元素。
Filter:函数()；比如：滤镜：模糊(5px)；/*模糊模糊处理，数字越大越模糊*/
b.CSS3 calc函数
calc()在声明CSS属性值时可以执行一些计算。
宽度：calc(100%-80px)；
c. CSS3过渡
过渡动画：就是重复一种状态，逐渐过渡到另一种状态。
过渡：运动曲线开始时，要过渡的属性需要时间；常与/* :hover */连用例如：transition: width .5s，height .5s/*多个属性用逗号分隔或全部*/* *添加**/属性到谁过渡：宽度、高度、背景色、内外边距均可，或全部花费时间均可：单位为秒(单位必须写)，如0.5s运动曲线：默认为ease(可省略)，何时开始：单位为秒(单位必须写)
2D转换
transform可以实现元素的位移、旋转、缩放等效果。
移动：平移旋转：旋转缩放：缩放
二维坐标系
1. 移动translate
更改元素在页面上的位置，类似于定位。
//移动盒子位置：通过2D转换定位盒子的外边缘，移动变换：translate(x，y)；transform:translate x()；transform:translate y()；定义2D转变中的运动。沿X、Y轴移动元素translate最大的好处是不会影响其他元素的位置：translate:translate中百分比单位时相对于自身元素平移：(50%，50%)；对内嵌标签没有影响。
2. 旋转：rotate
2D旋转是指在二维平面中顺时针或逆时针旋转元素。
transform:rotate(deg)//单位deg角度为正时为顺时针，为负时为逆时针。默认旋转的中心点是元素的中心点。
3. 中心点transform-orgin
变换-原点：x y；请注意，以下参数X和Y由空格分隔。X和Y的默认转换的中心点是(50% 50%)，相当于圆心。你也可以为X和y设置像素或者上下左右居中。
4. 缩放scale
变换：scale(x，y)；x用逗号变换(I，J)隔开：宽度放大I倍，宽度放大J倍；只写一个参数，第二个参数和第一个参数一样，可以设置转换中心点缩放。默认情况下，它按中心点缩放，不影响其他框。
5. 2D转换综合写法
a.同时使用多个转换。格式有transform:translate()rotate()scale()等。
b.其顺序会影响转换的效果，(先旋转会改变坐标轴方向)
c.同时具有排量等属性，所以把排量放在前面。
CSS3动画
动画可以通过设置多个节点精确控制一个或一组动画。经常用来实现复杂的动画效果，可以实现更多的变化，更多的控制，连续自动播放等效果。
1. 动画的基本使用
在调用动画之前定义动画。
a. 用keyframes定义动画(类似定义选择器)
多个动画可以添加到一个元素中，用逗号分隔即可。
@keyframes动画名称{ 0% { width:100px；} 100% {宽度：200px}} 0%是动画的开头，100%是动画的结尾。您可以在和之间更改任意数量的样式和时间，等于0%和100%。百分比应为整数。关键帧可以在多种状态下更改。
b. 元素使用动画
div { animation:name；动画-持续时间：持续时间：}
2. 动画的常用属性
3. 动画简写属性
动画：动画名称、时长、运动曲线何时开始播放、次数是否反方向、动画开始或结束的状态。
动画：第一个5s Linear2s无限交替速记属性不包含动画-播放-状态暂停动画：动画-播放-状态：暂停；经常和鼠标通过等其他东西配合使用，我想让动画回去而不是跳回去：动画-方向：交替；盒子动画结束后，停在结束位置：动画-填充-模式：论坛；
速度曲线细节
动画-计时-功能：指定动画的速度曲线。默认值为“减缓”
3D转换
3D位移和3D旋转3D位移：translate3d(x,y,z)3D旋转：rotate3d(x，y，z)透视：透视3D渲染：变换样式
1. 位移translate3d
transform:translate z(100px)；沿着Z轴移动。一般单位是px translateZ(100px)，向外移动，负数向内移动translate3d(x,y,z)。不能省略。如果没有，写0。
2. 透视perspective(单位px)
透视写在被观察元素的母框上(近大远小)
d:是视距，也就是人的眼睛和屏幕之间的距离。
Z:是Z轴，物体和屏幕之间的距离。Z轴越大(正值)，我们看到的物体就越大。
3. 旋转rotate3d
rotate3d允许元素在三维平面中沿X轴、Y轴、Z轴或自定义轴旋转。
元素旋转方向：左手准则
x
左手拇指指向X轴正方向，其他手指弯曲方向为元素沿X轴旋转的方向，y。
左手拇指指向Y轴的正方向，其他手指的弯曲方向是元素沿Y轴旋转的方向(正值)。transform:rotate3d(x，y，z，deg):仅沿定义的轴旋转deg一个角度。
Xyz表示旋转轴的矢量，最后一个表示旋转的角度。
4. 3D呈现transform-style(重要)
控制子元素是否打开3d立体环境转换样式：平面子元素不打开3D立体空间。默认的转换样式：preserve-3d；子元素打开3d立体空间代码，并将其写入父元素，但它会影响此处的子框。本文对CSS3过渡旋转透视2d3d动画效果的示例代码介绍如下。更多相关CSS3旋转透视2d3d动画内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。