css3
文章平均质量分 64
micoria
这个作者很懒,什么都没留下…
展开
-
CSS3-新增内容总结、3D转换、浏览器私有前缀
6. 3D转换6.1 三维坐标系三维坐标系指立体空间,是由3个轴共同组成的。x轴:水平向右 注:x右边是正值,左边是负值y轴:水平向下 注:y下面是正值,上面是负值z轴:垂直屏幕 注:往外是正值,往里是负值6.2 3D位移 tranlate3D语法:transform: translateX() translateY() translateZ()属性描述translateX沿着X轴移动translateY沿着Y轴移动translateZ沿着Z轴移动原创 2021-02-01 22:49:12 · 93 阅读 · 0 评论 -
CSS3动画animation使用和属性及相关案例
5.2 动画过渡:鼠标经过和离开才可以触发。动画:可以自己自动触发。5.2.1 动画的基本使用先定义动画。在使用(调动)动画。用@keyframes 定义动画@keyframes move(动画名称) { 0% { /*起始状态*/ transform: translate(0,0); } 100% { /*中止状态*/ transform: translate(500px,500px) scale(1.3) rotate(180deg); }}调用动画原创 2021-01-31 19:37:55 · 534 阅读 · 0 评论 -
2D旋转transform
5.1 transform转换5.1.1 translate(x,y) 位移可以改变元素在页面中的位置,类似定位。经常和transition过渡配合做出相对应的效果。补充:现在可以将盒子移动的方式有哪些?定位 (相对定位不会影响其他盒子的位置)外边距(margin)2D转换区别:和以上两种方式不同的是,2D转换不会影响其他盒子的位置(可以和position组合进行盒子垂直居中定位,下面有案例)语法transform: translate(x , y);tr原创 2021-01-31 11:39:45 · 445 阅读 · 0 评论 -
盒子水平垂直居中transform+position,input框的下拉三角按钮的设计
效果如图:代码展示:<style> * { margin: 0; padding: 0; } .box { position: relative; width: 800px; height: 800px; background-color: #999999; }原创 2021-01-30 19:47:38 · 135 阅读 · 0 评论