CSS变换、过渡、动画指导
时间:2023-04-05 22:27:03
HTML5
transform~复杂的变换参数。Transformvalue`none`初始值None适用于除“primitiveinline”框百分比相对范围框计算计算值指定值外的所有元素,但相对长度值将计算为绝对长度InheritanceNoanimationAnimationdeformationcoordinatesSystem1.1中CSS,笛卡尔坐标系用三个轴来表示(如下图所示):x轴(横轴),y轴(纵轴)z轴(深度轴)。每个元素都有自己的参考,每个轴都相对于自己移动。2D变形只需要关注x轴和y轴;3D应添加z轴。x轴的正值在右边,负值在左边。y轴纵轴正值向下,负值纵轴向上。Z轴从显示屏中跳出并指向您眼前。z轴上的正值离你更近,负值离你更远。1.2旋转如果元素旋转,则轴也旋转。旋转后的变换是另一种用于计算相对于旋转轴的CSS变形函数的坐标系——球坐标系通常用于平移translate()translate3d()translateX()translateY()translateZ()scalingscale()scale3d()scaleX()scaleY()scaleZ()rotaterotate()rotate3d()rotateX()rotateY()rotateZ()rotate3d(x,y,z,deg)用rotate(45deg)表示在3D旋转是rotate3d(0,0,1,45deg)使用rotate3d()。前三个值指定向量x,y,z在3D空间中的向量,第四个值是角度值,表示上图中的rotate(45deg)是在3D空间中,相当于rotate3d(0,0,1,45度)。前三个数字设置向量的三个分量,该向量在x轴和y轴上的大小为0。z轴上的大小为1。因此,此向量在z轴上,指向正方向,即指向观察者。如果查看向量的原点,元素将顺时针旋转。假设旋转函数是一个用rotate3d(-0.95,0.5,1,45deg)描述的向量。假设一个边长为200像素的立方体,该向量在x轴上的大小为190像素并指向左侧。y轴上的大小为100像素,指向下方。z轴上的大小为200像素,指向观察者。这个向量从原点(0,0,0)指向(-190px,100px,200px)。如下图:ps:rotate3d(1,1,0,45deg)不等同于rotateX(45deg)rotateY(45deg)rotateZ(0deg)。Tiltskew()skewX()skewY()perspective在3D空间改变元素的形状时,基本上需要给元素一定的视野。视域赋予元素从前到后的深度,可以根据需要进行设置。可以这样理解,镜头的焦距越大越远,越小越近;近的大,远的小;如果有3D效果,需要配置使用perspective()在500px到1000px之前的值来产生“中等视野”。下图显示了相同旋转角度使用不同视域值得到的结果。必须为正数且不能为零。任何其他值都会导致perspective()函数被忽略。确保将perspective()函数放在首位,只要它也在从视口转换之前。perspective属性和perspective()函数的区别perspective()函数只是为目标元素定义视口,比如声明perspective(800px)rotateY(45deg)。然后只有适用此规则的元素才能使用设置的视口。perspective属性定义的视口深度适用于目标元素的所有子元素。其他移动原点transform-origin目前看到的变换有一个共同点,都是以元素的绝对中心作为变换的原点。第一个值用于横向,第二个值用于纵向,可选的第三个值是z轴上的长度。变换方法transform-style设置元素的子元素是位于3D空间还是平面。.outer{transform:perspective(750px)translateY(60px)rotateX(-20deg);转换样式:保留3d;}.inner{转换:透视(750px)translateZ(60px)rotateX(45deg);}inner
ps:transform-style变形方法集可能被其他属性覆盖,导致无效preserve-3doverflow:visiblefilter:noneclip:autoclip-path:nonemask-image:nonemask-border-source:nonemix-blend-mode:normal处理背面在3D变形中,backface-visibility属性可以看到元素的背面。.card{position:relative;perspective:800px;transform-style:preserve-3d;width:200px;height:280px;transition:all.6s;border:1pxsolid#000;border-radius:4px;}.card:hover{transform:rotateY(180deg);}img{position:absolute;width:100%;height:100%;transition:all.5s;backface-visibility:hidden;}/*因为我们把两个图像都隐藏在后面所以另一边什么也没有。所以接下来,你需要翻转.front-face180度*/.back-face{transform:rotateY(180deg);}
注意边界框:计算边界框时不计算轮廓和边距变形元素有自己的堆叠上下文:小或大变形前,元素在页面上所占的空间与变形前一样。Trueforalltr??ansformationfunctions表示一个或多个转换函数:以空格分隔。如:transform:rotate(30deg)skewX(-25deg)scaleY(2);变换顺序:从最左边第一个到最后一个正确设置值:当有多个变换函数时,必须正确设置每一个,以确保全部有效。如果一个功能无效,则整个值都将无效。变形堆叠:变形通常不堆叠。如果你改变了元素的形状,然后想增加一个变形,你需要在原来的变形的基础上进行修改。转换目前不适用于原始内联框。Primitiveinlineboxes指的是span、超链接等内联框。这些元素可以随其块级父元素一起变形,但不能直接旋转。除非他们的显示方式改为display:block,display:inline-block等。有3D效果需要结合**perspective**才能使用transition:属性durationtiming-functiondelaytransition~property,triggeraction,短暂的。transition-property:width,heitht,color;transition-duration:1s,1.5s,2s;transition-timing-function:ease,linear,ease-in-out;transition-delay:0s,1s,0s;transition:width1sease,heitht1.5slinear1s,color2sease-in-out;valuedescriptiontransition-property指定设置过渡效果的CSS属性的名称。transition-duration指定完成转换所需的秒数或毫秒数。transition-timing-function指定速度效果的速度曲线。transition-delay定义过渡效果何时开始。transition-property:none|all|_property_指定设置过渡效果的CSS属性的名称。值说明none没有属性会得到过渡效果。all所有属性都会得到过渡效果。property定义一个以逗号分隔的CSS属性名称列表,以应用过渡。支持转场动画属性transition-duration:_time_指定完成转场效果需要多少秒或多少毫秒。值描述时间指定完成转换所需的时间(以秒或毫秒为单位)。默认值为0,表示没有效果。transition-timing-function指定速度效果的速度曲线。描述线性的值指定以相同速度开始和结束的过渡(等于cubic-bezier(0,0,1,1))。ease指定开始缓慢,然后变快,然后缓慢结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。ease-in指定以低速开始的过渡效果(等于cubic-bezier(0.42,0,1,1))。ease-out指定以低速结束的过渡(等于cubic-bezier(0,0,0.58,1))。ease-in-out指定以低速开始和结束的过渡(等于cubic-bezier(0.42,0,0.58,1))。cubic-bezier(_n_,_n_,_n_,_n_)在cubic-bezier函数中定义自己的值。可能的值是0到1之间的数值。transition-delay定义了过渡效果何时开始。值描述时间指定过渡效果开始前等待的时间,以秒或毫秒为单位。请注意,事件触发是必需的,因此它不会在网页加载时自动发生。这是一次性的事件,不能重复。除非反复触发,否则只能定义起始状态和结束状态,无法定义中间状态。也就是说,只有两种状态和一种转移规则。,只能定义一个属性的变化,不能涉及多个属性。animation:_name_duration_timing-function_delay_iteration-count_direction动画~关键帧,往复运动
值说明animation-name指定需要绑定到选择器的关键帧名称。.animation-duration指定动画完成所需的时间,以秒或毫秒为单位。animation-timing-function指定动画的速度曲线。animation-delay指定动画开始前的延迟。animation-iteration-count指定动画应该播放多少次。animation-direction指定是否依次反向播放动画。动画名称:_关键帧名称_|无;值描述keyframename指定需要绑定到选择器的关键帧的名称。none指定没有动画效果(可用于覆盖级联动画)。animation-duration:时间值描述time指定的时间完成动画。默认值为0,表示没有动画。animation-timing-function:_value_animation-timing-function使用称为三次贝塞尔函数的数学函数来生成速度曲线。你可以在这个函数中使用自己的值,也可以预先定义值:该值描述的是线性动画的速度从头到尾都是一样的。默认情况下轻松。动画以低速开始,加速,然后减速结束。缓入动画以低速开始。缓出动画以较慢的速度结束。缓入缓出动画以低速开始和结束。cubic-bezier(_n_,_n_,_n_,_n_)在cubic-bezier函数中拥有自己的值。可能的值是从0到1的数值。steps(5,end);动画分多少段播放animation-delay:时间值描述时间可选。定义动画开始前等待的时间,以秒或毫秒为单位。默认值为0。animation-iteration-count:_n_|infinite;值说明n定义动画播放的次数。infinite指定动画应该播放无限次。动画方向:正常|交替;值描述正常默认值。动画应该可以正常播放。交替动画应该依次反向播放。参考https://juejin.cn/post/6844903874579578887#heading-17https://jelly.jd.com/article/6006b1025b6c6a01506c8775https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/https://www.w3school.com.cn/cssref/pr_transition.asp