CSS3---2D变换

php中文网

发布时间：2016-08-18 08:57:57

1333人浏览过

来源于php中文网

原创

transform

　　transition-origin：设置对象中变换所参照的原点

　　none:无变换

　　translate([,]):指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认是为0.

　　　　translateX():指定对象X轴平移

立即学习“前端免费学习笔记（深入）”；

　　　　translateY():指定对象Y轴平移

　　rotate():指定对象的2D rotation（2D 旋转），需要现有transtion-origin属性的定义

　　scale([,]):指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数。

　　　　scaleX():指定对象X轴的（水平方向）缩放

　　　　scaleY():指定对象Y轴的（竖直方向）缩放

　　skew():指定对象的skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认是为0.

　　　　skewX():指定对象Y轴的（水平方向）扭曲

　　　　skewY():指定对象Y轴的（水平方向）扭曲

过渡：

Getfloorplan

创建 2D、3D 平面图和 360° 虚拟游览，普通房间变成梦想之家

下载

transtion:[transtion-property]||[transtion-duration]||[transtion-timing-function]||[transtion-delay]

　　transtion-property:检索或设置对象中的参与过渡的属性 default

　　transtion-duration:检索或设置对象过渡的持续时间

　　transtion-timing-function:检索或设置对象过渡的动画类型

　　transtion-delay:检索或设置对象延迟过渡的时间

动画：

animation:[animation-name]||[animation-duration]||[animation-timing-function]||[animation-delay]||[animation-iteration-count]||[animation-direction]

　　animation-name:检索或设置对象所应用的动画名称

　　animation-duration:检索或设置对象动画的持续时间

　　animation-timing-function:检索或设置对象动画的过渡类型

　　animation-delay:检索或设置对象动画的延迟时间

　　animation-iteration-count:检索或设置对象动画的循环次数

　　animation-direction:检索或设置对象动画在循环中是否反向运动

ios怎样调用html5多语言切换_ios调用html5国际化法【步骤】

html个人页面怎么加卡片翻转_html3D翻转效果实现【动效】

如何通过单击事件批量切换多个CSS样式？

CSS nth-child 伪类无法响应元素显隐状态变化：解决方案详解

如何通过单次点击事件动态切换多个CSS样式？

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：兼容IE6的min-width、min-height 下一篇：CSS布局

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容，阅读专题下面的文章了解更多详细学习方法。

2026.01.29

java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容，阅读专题下面的文章了解更多详细操作。

2026.01.29

java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容，阅读专题下面的文章了解更多详细推荐内容。

2026.01.29

Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容，阅读专题下面的文章了解详细操作教程。

2026.01.29

Java空对象相关教程合集

本专题整合了Java空对象相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.29

clawdbot ai使用教程保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手，可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等，并且可以接入用户常用的任何聊天APP，所有的操作均可通过WhatsApp、Telegram等平台完成，用户只需通过对话，就能操控设备自动执行各类任务。

2026.01.29

clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址

clawdbot龙虾机器人官网入口:https://clawd.bot/,clawdbot ai是一个“有灵魂”的AI助手，可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等，并且可以接入用户常用的任何聊天APP，所有的操作均可通过WhatsApp、Telegram等平台完成，用户只需通过对话，就能操控设备自动执行各类任务。

2026.01.29

Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用，包括对称加密与非对称加密（AES、RSA）、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范（如SQL注入、XSS、CSRF）及其防护措施。通过实战案例，帮助学习者掌握如何使用 Go 语言保障网络通信的安全性，保护用户数据与隐私。

2026.01.29