transform

ios/safari滚动(transform)的时候圆角变方框(border-radius)失效问题

阅读更多关于 ios/safari滚动(transform)的时候圆角变方框(border-radius)失效问题

比如界面有跑马灯（轮播图），为了图片好看，一边都有圆角，所以边框就用border-radius: 12px; 用谷歌浏览器发现没什么问题。但是用safari，iphone的mac都一样，会出现滚动的时候圆角短时间成方块，动画完成后，会变成圆角。查了资料发现safari会在 transform的时候border-radius失效。解决方案就是外围的div加个 -webkit-transform:rotate(0deg); 比如下面的代码你们可以试试，用的是vue+vant： vant轮播图官方api: https://youzan.github.io/vant/#/zh-CN/swipe <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-swipe-item v-for="item in cardImgs"> <van-image class="card-detail-card-img" :src="item" /> </van-swipe-item> </van-swipe> cardImgs:[ 'http://xxx.jpg', 'http://xxx2.jpg' ], .my-swipe{ /*加上这个搞定*/ -webkit-transform:rotate(0deg

css动画demo

阅读更多关于 css动画demo

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zepto实现手机端滚屏效果</title> <meta name="description" content="羊城杯活动"> <meta name="keywords" content="羊城杯活动"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta content="telephone=no" name="format-detection"> <script type="text/javascript" src="http://script2.pingan.com/app_js/wap/common/flexible.min.js"></script> <link rel="stylesheet" href="http://css2.pingan

移动端1px解决方法

阅读更多关于移动端1px解决方法

文章目录方法一. ::after或者::before + transform 方法二.viewport和rem结合方法三.小数值方法四.css3中box-shadow 方法一. ::after或者::before + transform 在移动端web开发中，设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。我们通常在css中设置的width：1px，对应的便是物理像素中的2px。 div { position : relative ; height : 100 px ; width : 100 px ; background - color : pink ; /* border: 1px solid red; */ } div : : after { content : '' ; position : absolute ; top : 0 ; left : 0 ; border : 1 px solid red ; - webkit - box - sizing : border - box ; box - sizing : border - box ; width : 200 % ; height : 200 % ; transform : scale ( 0.5 ) ;

HTML5 logo源代码

阅读更多关于 HTML5 logo源代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 logo</title> <style> body{ margin:0; padding:0; } div{ position:absolute; } /*给类名为bg的元素设置宽、高、背景颜色*/ .bg{ width: 8000px; height:6000px; background:#f2f2f2; overflow: hidden; } /*给类名为beam的元素设置宽、高、背景颜色及绝对定位*/ .beam{ width:1600px; height:20px; background:#fff; top:290px; left:-400px: } .d_shield1,.d_shield2 ,.d_shield3,.d_shield3 ,.d_shield4 ,.d_shield5 ,.d_shield6 ,.d_shield7 { background:#e15016; } /*给类名为d_shield1 的元素设置宽、高及绝对定位*/ .d_shield1 { left:32px; width:140px; height:346px; } .d_shield2 { transform: skewx(5deg); /

transform-坐标系统

阅读更多关于 transform-坐标系统

坐标系 i-系 -地心惯性坐标系ECI-i系:原点为地球原点，z北极，x,y指向两课恒星(与赤道同平面)，不随地球自转而转 ECI-i系->坐标系是不会随着地球的自转而变化的，它是非常固定的坐标系。这样的坐标系的作用是在地球表面这些载体，在运动时候，你的相对惯性，是相对与这个坐标系。所以我们讲的imu检测到或者计算到探测到的加速度，角速度都是相对于地心惯性坐标系的。他的特点就是xy不动，不随着地球的自转而转动，可以作为地球附近传感器输出的惯性坐标系。 e-系 (如WGS84)地心地固坐标系ECEF-e系：原点为地球原点，x 格林威治 y 东经90° z北极，随地球自转而转如WGS84大地坐标系，不太适合做定位。Apollo采用的是WGS84（World Geodetic System 1984）作为标准坐标系来表示物体的纬度和经度，如表示高精地图（HD Map）中各个元素的地理位置。使用xyz表示或者经纬度表示 ECEF-e系->和地球固连在一起，它随着地球的转动而转动，它其实在某些时刻和i系是一样的，比如我们旋转到指定的位置，比如说一个值自转到那个时刻，那么xy轴就会重合，对于地球上任意一点，它是有一个自己的精确xyz的坐标，它i系之间就存在一个随着时间的旋转，i系到e系，绕着z轴做一个时间上的一个旋转，就可以得到。 utm坐标:60度带的划分、定位输出的坐标

CSS动画

阅读更多关于 CSS动画

Part1：Transition CSS动画主要由两个属性来实现： Transition Animation + Keyframes transition的意思就是当某个元素的某个属性发生变化的时候，transition会帮你添加中间帧，让这个变化不那么生硬，比如下面这样一个简单的box的hover动画,如果不添加这一行transition代码就会生硬的直接从方变成圆。基本语法 .element { transition: [property] [duration] [ease] [delay]; 变化属性变化时间曲线延时 } 比如 .red { transition: opacity 300ms ease-in-out 1s;} 意思就是transition会监测这个class名为red的元素，如果这个元素的opacity发生了变化，那么transition会帮你把这个变化变成一个持续时间300ms的动画，这个动画的速度曲线是ease-in-out，并且会有1s的延迟，也就变化的1s后开始执行动画。理解了transition是什么之后，现在有两个问题：有哪些属性可以transition？怎么触发transition？问题一：有哪些属性可以transition？其实很简单，概括的说，只有两类属性是适合（并且可以）transition的： transform 和

Fourier Transform in Python giving blank images

阅读更多关于 Fourier Transform in Python giving blank images

问题 I am new to python and I am simply trying the 2d Fourier transform on an image and simply reconstruct it using ifft2 in numpy. However, the spectrum magnitude and the reconstructed are white images. This might indicate some scaling issue but I don't understand how to resolve it. import matplotlib.image as mpimg import matplotlib.pyplot as plt imgloc="C:\\Users\\AnacondaCodes\\cameraman.png" img=mpimg.imread(imgloc,0) import numpy as np f=np.fft.fft2(img) fshift=np.fft.fftshift(f) magnitude

3d旋转图片立方体特效代码

阅读更多关于 3d旋转图片立方体特效代码

在一个月的学习后，学会了用代码实现图片的旋转，形成“旋转木马”效果，及立方体和动画特效的添加。一、图片的旋转第一步是创建一个图片盒子，将所有图片定位在盒子里，互相重叠。然后根据最终效果，以图片盒子中心为原点，通过transform属性对每一张图片设置相应的位移和旋转角度。最后给图片盒子添加旋转360°的动画效果，并设置景深实现“近大远小”的视觉效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0;padding: 0; } html,body{ height: 100%; } body{ background: url(./images/bg2.jpg); background-size: 100% 100%; perspective: 2000px; } .box{ width: 280px; height: 400px; background: url(./images/a.gif) no-repeat center; position: fixed; left: 0

浅谈H5C3

阅读更多关于浅谈H5C3

<一个幼儿园小班的前端的成长随笔,错误与不足之处,望各位大牛批评指点,谢谢!> HTML5 超文本标签语言 : 用文本来表示带有特殊标签的语言对html5语义化标签的理解标签具有语义的意义有利更好呈现代码结构便于SEO: Search Engine Optimization 搜索引擎优化提升用户体验: [eg: label标签: 获取光标焦点] 便于团队开发维护: 更具可读性方便其他设备解析 --- [可省略] H5在客户端储存数据的新方法 localStorage -- 没有时间限制的数据储存 sessionStorage -- 针对一个session的数据储存,用户关闭浏览器窗口后,数据被删除 H5的表单input action= " " 表单跳转 method= " " 请求方式 name= " " name属性 ===> 设置了 name 属性的表单元素才能在提交表单时传递它们的值类型实例文本类 Text[文本], Url[网络地址], Password[密码], Email[邮箱地址] 操作类 Checkbox[复选框], Radio[单选框], File[文件], Number[数值], Range[百分比滑动条] 功能类 Button[按钮], Image[图片提交按钮], Submit[文字提交按钮], Reset[重置表单] Date类 Date

阅读更多关于 Transform

Variables 变量 position The position of the transform in world space. 在世界空间坐标transform的位置。 localPosition Position of the transform relative to the parent transform. 相对于父级的变换的位置。 eulerAngles The rotation as Euler angles in degrees. 旋转作为欧拉角度。 localEulerAngles The rotation as Euler angles in degrees relative to the parent transform's rotation. 旋转作为欧拉角度，相对于父级的变换旋转角度。 right The red axis of the transform in world space. 在世界空间坐标变换的红色轴。也就是x轴。 up The green axis of the transform in world space. 在世界空间坐标变换的绿色轴。也就是y轴。 forward The blue axis of the transform in world space. 在世界空间坐标变换的蓝色轴。也就是z轴。 rotation The

订阅 transform