2 3D转换及过渡
程序员文章站
2022-04-18 12:47:03
...
2D转换
translate() 方法
通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:
实例
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
rotate() 方法
通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
实例
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
scale() 方法
通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:
实例
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
2D Transform 方法
过渡它如何工作?
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
实例
应用于宽度属性的过渡效果,时长为 2 秒:
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
注释:如果时长未规定,则不会有过渡效果,因为默认值是 0。
效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时:
实例
规定当鼠标指针悬浮于
元素上时:
div:hover
{
width:300px;
}
上一篇: 4行Python代码监测每行程序的运行时间和空间消耗
下一篇: 懒加载的基本原理与实现
推荐阅读
-
CSS3如何实现2D转换和3D转换,他们有何区别_html/css_WEB-ITnose
-
Struts2单选按钮详解及枚举类型的转换代码示例
-
Axure RP 8怎么价格2D图形转换成3D图?
-
3D视频转换软件Xilisoft 3D Video Converter中文安装及激活教程(附补丁+软件下载)
-
C# 2进制、8进制、10进制、16进制...各种进制间的转换(二)搜集的各种转换及方法
-
前端笔记知识点整合之HTML5&CSS3(下)2D/3D转换&animate动画
-
Struts2单选按钮详解及枚举类型的转换代码示例
-
PDF转换工具Able2Extract Professional 14安装及激活教程(附激活补丁)
-
丽讯推新品投影仪 具备2D至3D转换功能
-
3D视频转换软件Xilisoft 3D Video Converter中文安装及激活教程(附补丁+软件下载)