今天分享一个纯CSS的3D旋转效果

今天分享一个纯CSS的3D旋转效果

为了不影响首页效果,就不在首页上放了,点进来看呗。

具体效果如下

See the Pen LYVKzbb by Bo.Jin (@BoJin) on CodePen.

涉及到的技术

transform

定义和用法

transform 属性向元素应用 2D3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

1
transform: none|transform-functions;
描述
none定义不进行转换。
matrix(n,n,n,n,n,n)定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y)定义 2D 转换。
translate3d(x,y,z)定义 3D 转换。
translateX(x)定义转换,只是用 X 轴的值。
translateY(y)定义转换,只是用 Y 轴的值。
translateZ(z)定义 3D 转换,只是用 Z 轴的值。
scale(x,y)定义 2D 缩放转换。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿着 X 轴的 3D 旋转。
rotateY(angle)定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)为 3D 转换元素定义透视视图。

transform-style

定义和用法

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

语法

1
transform-style: flat|preserve-3d;
描述
flat子元素将不保留其 3D 位置。
preserve-3d子元素将保留其 3D 位置。

animation

1
animation: name duration timing-function delay iteration-count direction;

timeing-function

描述
linear动画从头到尾的速度是相同的。
ease默认。动画以低速开始,然后加快,在结束前变慢。
ease-in动画以低速开始。
ease-out动画以低速结束。
ease-in-out动画以低速开始和结束。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

@keyframe

通过 @keyframes 规则,您能够创建动画。创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。在动画过程中,您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间,或者通过关键词 “from” 和 “to”,等价于 0% 和 100%。0% 是动画的开始时间,100% 动画的结束时间。

为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。

@keyframe语法

1
2
3
4
5
@keyframes animationname {
keyframes-selector {
css-styles;
}
}
描述
animationname必需。定义动画的名称。
keyframes-selector必需。
动画时长的百分比。
合法的值:
0 ~ 100%
from(与 0% 相同)to(与 100% 相同)
css-styles必需。一个或多个合法的 CSS 样式属性。

评论

Agile Angularjs Animation Application Artificial Intelligence BP Babel Bokeh Book C4.5 CART CD CLI CSS CentOS CheetSheet Cinder Clipboardjs Concept Continuous Delivery DeepLearning Department DevOps Develop Development Directive Distribution Django Document ECMA ELU ES5 ES6 ES7 Echarts Engine Entropy Filter Front End GELU Gallery Git Gradient descent Hexo Horizon ID3 ID3.5 Icarus JavaScript Javascript KVM LaTeX LeetCode LibreOffice Linux Logestic MNIST Machine Learning Mathematics Matrix MiddleWare Module Native Network Nginx NodeJS Numpy OOP OpenSSH OpenStack OpenStackApi Operations Oprations PDF PLA Pandas Pipline Probability Python ReLU React Relational algebra Restful Route SVD SVM Scalar Sigmoid SoftPlus Swish Team Tempest Tensor TensorFlow Testing Time TimeMachine Tips Vector Vmware Vue Vuex WSGI Web Word Cut aliyun auth babel certbot cost function debounce decision tree dns docker dockerfile eject error function footer git header homebrew html5 http https jupyter jwt keystone lab loader lodash loss function mathematics migrate nav openstack outline pdf2html pm2 proto prototype python replace request response rp rt ruby scikit-learn section singular value decomposition sklearn stylus tanh throttle url vue-router vue-ssr webpack 事件 事件代理 事件冒泡 事件捕获 位运算 低通滤波器 入门 全局 全局变量 全局对象 全栈 公式 决策树 几何意义 函数 分类器 剪枝 加速 动态变量 匹配滤波边缘检测 卷积 卷积核 原型链 双向绑定 反向传播 发布 变量类型 可视化 基尼指数 官方示例 对偶形式 对象 小技巧 平移和查分边缘检测 思维导图 感知机模型 手动实现 拉格朗日乘子法 推导 提交阶段 数据 数据绑定 最大似然估计 最小二乘估计 最小二乘回归树 最小二乘法 本地 朴素贝叶斯 朴素贝叶斯算法 机器学习 条件概率 标签模板 梯度下降 梯度方向边缘检测 概念 概率 模板字符 模板字符串 正则 求导 流程 源码 源码阅读 激活函数 灰度 特征值 特征向量 特征工程 生命周期 矩阵 神经元 神经网络 私有对象 科学计算 算法 算法实现 线性代数 线性回归 编译 缺失 联合概率 脚手架 识别 调试 贝叶斯 贝叶斯判定准则 边缘检测 边际概率 闭包 间隔 防抖动 限流 随机森林 高斯分布 高通滤波器
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×