CSS3 3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

在本章中,您将学到其中的一些 3D 转换方法:

  • rotateX()
  • rotateY()

rotateX() 方法

rotateX()方法,围绕其在一个给定度数X轴旋转的元素

div
{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
}
div#div2
{
    transform:rotateX(120deg);
    -webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>

rotateY() 方法

rotateY()方法,围绕其在一个给定度数Y轴旋转的元素。

<style>
div
{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
}
div#div2
{
    transform:rotateY(130deg);
    -webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>

时间: 2024-11-05 11:57:09

CSS3 3D 转换的相关文章

CSS3 3D转换transform

3D: 脱离文档流,平均角度,按z轴即垂直div往外,各自推送相同的距离 1.perspective的作用? 使具有3D效应的元素,产生透视效果,若没有透视效果,你看到的只是2维的平面 2.perspective-3d的作用? 规定了子元素是看起来位于3维空间,还是在2维平面 当只有perspective时,很容易产生一些奇怪的透视3维平面,即其子元素应该是3维的透视到此父元素的平面上,但由于没有perspective-3d则会在其上平面化显示,即有独立的3维空间但显示确偏2维,而只有persp

css3 2d转换3d转换以及动画的知识点汇总

css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值可为小数,不可为负值: 4.旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针: 5.倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜 2d转换的属性: transform transform-origin 用法: 例如: div { transform:

CSS笔记(十二)CSS3之2D和3D转换

参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵. translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素. translateX(n) 定义 2D 转换,沿着 X 轴移动元素. translateY(n) 定义 2D 转换,沿着 Y 轴移动元素. scale(x,y) 定义 2D 缩放转换,改

Css3之高级-5 Css转换(简介、2D转换、3D转换)

一.转换简介 转换概述 - 转换是使元素改变形状.尺寸和位置的一种效果 - 又称为变形,即,可以向元素应用2D 或 3D 转换,从而对元素进行旋转.缩放.移动或倾斜 - 2D 转换: 使元素在 X轴 和 Y轴 平面上发生变化,改变其形状.尺寸和位置 - 3D 转换:元素还可以在 Z 轴上发生变化 转换属性 - transform 属性向元素应用 2D 或者 3D 转换 - 指定一组转换函数,取值 - transform: none/transform-function; - none - 默认值

CSS3的3D转换效果详解介绍

CSS3的3D转换效果详解介绍:本章介绍一下CSS3的3D转换效果,此效果的实现依靠的是transform属性,3D转换只是此属性的部分应用,更多相关内容可以参阅CSS3的transform属性总略介绍一章节.掌握3D转换效果,可以从三个方法作为突破口,分别是rotateX, rotateY, rotateZ,在2D变换过程中rotate()函数的应用,它表示旋转的意思,由于是2D变换,所以它只是在一个平面进行旋转,所以无需细分,具体可以参阅CSS3的2D转换效果详细介绍一章节. 下面分别介绍一

CSS3的3D转换translate3d(x,y,z)函数

CSS3的3D转换translate3d(x,y,z)函数:translate3d(x,y,z)只是规定3D转换的一种形式,更多相关内容可以参阅CSS3的3D转换效果详解介绍一章节.此函数用来规定指定元素在三维空间中的位移.语法结构: translate3d(x,y,z) 参数解析:1.x:表示在x轴方向的位移.2.y:表示在y轴方向的位移.3.z:表示在z轴方向的位移.代码实例:1.x轴方向的位移: <!DOCTYPE html> <html> <head> <

CSS3中的2D和3D转换知识介绍

一  2D转换 转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值可为小数,不可为负值: 4.旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针: 5.倾斜 skew(deg, deg)

CSS3的2D与3D转换

2D和3D转换涉及到数学中的知识,作为一个数学专业的毕业生,不研究一下岂不是对不起自己的专业? 首先来看几个参数: 1.transform-origin:origin(起源,起点),也即变形的起点,在数学上可以理解为坐标原点. 其语法为:transform-origin:[<percentage> | <length> | left | center | right | top | bottom] | [<percentage> | <length> | l

CSS自学笔记(13):CSS3 2D/3D转换

CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transform属性来实现转换效果. 浏览器支持 属性 浏览器支持 2D transform IE Firefox Chrome(-webkit-) Safari(-webkit-) Opera 3D transform IE Firefox Chrome(-webkit-) Safari(-webkit-)