先进的CSS3 2D和3D转换技术

最新推荐文章于 2024-07-31 16:33:32 发布

dingshi7798

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量132

点赞数

文章标签： javascript ViewUI

使用Flash和GIF图像创建动画图形的日子已经一去不复返了。现在该展示一些最佳的CSS3功能了。

CSS3转换已经在网络上存在了很长一段时间。 Mozilla，Google Chrome和Opera等浏览器完全支持CSS3 2D和3D转换技术。

在本文中，您将学习：

CSS3 2D转换技术
CSS3 3D转换技术
什么是透视图？
以及许多不同的转换功能

我还准备了演示，其中将向您展示如何制作：

3D卡翻转
3D立方体或骰子

您可能会想到的第一个问题是，为什么我们需要对动画和图形进行CSS3转换？好吧，答案很简单， 网页更快 ！

是的，与沉重的GIF图像和Flash内容相比，CSS动画非常轻巧。除此之外，Google并未根据SEO评分对Flash内容给予很高的评价。如果您的网站中使用的动画也被机器人和搜索引擎读取了怎么办？从您的SEO角度来看，这不是额外的功能吗？

了解CSS3 2D变换

CSS3 2D转换为您提供了更多装饰和动画HTML组件的自由。您具有装饰文本的更多功能，以及装饰div元素的更多动画选项。 CSS3 2D转换包含一些基本功能，如下所示：

translate()
rotate()
scale()
skew()
matrix()

翻译

使用translate()函数，您可以将div和文本从其原始位置移动到任何xy坐标，而不会影响其他HTML组件。例如：

div{ 
    transform: translate(20px,20px); 
}

上面的代码将div元素在x方向上转换为20px，在y方向上转换为20px。

translate

注意：xy坐标在浏览器中的位置与几何中使用的坐标不同。 x值为正表示将对象向右移动，而y值为正表示将对象向y底部移动。 (0,0)坐标是指浏览器的左上角。

对于Opera，Chrome和较旧的Firefox等浏览器，必须在transform属性中使用–webkit- ，- -moz-和–o-前缀。并非所有浏览器都完全接受CSS3转换，但是主流浏览器确实使用上述供应商提供的前缀之一来支持它们。

旋转

rotate变换功能将指定的HTML元素旋转到给定程度。旋转为顺时针，从0度开始到360度。旋转在xy平面中完成。

div{ 
    transform: rotate(30deg); 
}

rotate

规模

顾名思义，它会将旧div缩放为指定的新大小。这种缩放发生在x和y方向上。您可以通过将值（作为参数scale()指定给scale()函数来控制缩放量。

div{ 
    transform: scale(2,4); 
}

scale

偏斜

当将skew变换函数应用于元素时，该元素会弯曲到指定数量，如参数列表中所提供的那样。您必须为x方向和y方向指定角度值。

div{ 
    transform: skew(30deg,20deg); 
}

skew

矩阵

matrix变换函数的工作是将上述所有2D变换函数组合为一个属性。这些值采用线性变换矩阵的形式。

div{ 
    transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); 
}

matrix

CSS3 3D转换

现在，您已经完成了2D转换的基础知识，对您而言，了解3D转换将不是一件困难的任务。 3D转换包括HTML元素的Z轴转换。我们将介绍3D转换中使用的每个新属性。

translate3d(<translation-value>, <translation-value>, <length>) ：定义3D翻译。它采用三个参数x，y和z值。 z值指定Z轴上的平移。
translateZ(<length>) ：要仅在Z方向上定义平移，请使用此变换函数。它的工作方式类似于translateX()和translateY() 。
scale3d(<number>, <number>, <number>) ：此函数在所有三个维度上进行缩放。它采用三个参数，分别是sx，sy和sz。每个值定义相应方向上的缩放比例。
scaleZ(<number>) ：与translate()函数一样，我们也具有scaleZ()函数，该函数仅在一个方向（即Z方向scaleZ()上定义缩放比例。我们还具有scaleX()和scaleY()函数，它们的功能也类似于scaleZ()但它们的方向相同。
rotate3d(<number>, <number>, <number>, <angle>) ：它将单个HTML元素旋转由前三个数字指定的[tx，ty，tz]向量中最后一个参数提供的指定角度。。
rotateX(<angle>) ， rotateY(<angle>)和rotateZ(<angle>)仅采用单个角度值即可在相应的轴上旋转。

注意： rotate3d(1,0,0,30deg)等于rotateX(30deg) ， rotate3d(0,1,0,30deg)等于rotateY(30deg) ， rotate3d(0,0,1,30deg)等于rotateZ(30deg) 。

透视

使用CSS的3D变换的主要部分是透视图。要激活3D空间以进行3D转换，您需要激活它。可以通过以下两种方式完成此激活：

transform: perspective(500px);

要么

perspective: 500px;

功能符号用于激活单个元素，而第二符号用于将透视图同时应用于多个元素。

变形风格

这是3D空间中的另一个重要属性。它有两个值： preserve-3d或flat 。当transform style的值preserve-3d它告诉浏览器children元素也应该放置在3D空间中。另一方面，当此属性的值是flat ，表明子元素存在于元素本身的平面上。

让我们开始工作

在本节中，我们将尝试学习如何激活3D空间以及如何如上所述应用3D变换不同的功能。在下面的程序中，我们将创建一个蓝色正方形图形，然后将其沿Y轴旋转30度。

的HTML

<section id="blue" class="container"> 
    <div></div> 
</section>

的CSS

/* styling a container of size 200px X 200px that will contain the object */ 
.container{ 
    width:200px; 
    height:200px; 
    margin:40px auto; 
    position:relative; 
}
/* activating the 3D space */ 
#blue{ 
    perspective: 600px; 
} 
/* coloring the box and rotating it by 30 degrees in the 3D space */ 
#blue .box{ 
    background:blue; 
    transform: rotateY(30deg); 
    -moz- transform: rotateY(30deg); 
    -webkit- transform: rotateY(30deg); 
    -o- transform: rotateY(30deg); 
}

test1

同样，您可以将不同的translate() ， scale()和rotate()函数应用于上图，并查看图的方向如何变化。我在下面给出了一个截图，显示了transformZ translateZ()转换。

test2

CSS3 3D转换演示

1）翻牌

现在我们已经了解了2D和3D转换的基础知识，我们将进行一些实际的演示，并了解如何在日常网站中使用它们。我将向您展示如何使用CSS3 3D变换制作卡片翻转动画。该卡的正面有Apple徽标，背面有Samsung徽标，翻转时会显示SitePoint徽标。有趣吗？

的HTML

<section class="container"> 
    <div id="card"> 
    <figure></figure>
    <figure></figure> 
</div> </section> 
<a href="#">flip it!</a>

的CSS

/* Design container */ 
.container { 
    width: 250px; 
    height: 250px; 
    position: relative; 
    margin: 40px auto; 
    border: 1px solid #999999; 
    -webkit-perspective: 600px; 
    -moz-perspective: 600px; 
    -o-perspective: 600px; 
    perspective: 600px; 
}

容器为正方形，每边尺寸为250px。我们还提供了将容器放置在屏幕中央的边距。要激活3D空间，我们还将前瞻属性设置为600px。由于这是主要容器，因此我将背景图像设置为SitePoint的徽标。现在，当卡片翻转时，将显示此背景。

的CSS

/* styling card element */ 
#card { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transition: -webkit-transform 1s; 
    -moz-transition: -moz-transform 1s; 
    -o-transition: -o-transform 1s; 
    transition: transform 1s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
}

由于height和width设置为100％，因此card div采用父容器元素的尺寸。我们定义了使用transition属性进行transition 。设置为1s可以使翻转动画1秒钟。 transform-style属性可确保此card div的子元素也已激活其3D空间。默认情况下，如果父元素的3D空间被激活，则只有其直接子元素继承3D激活。因此，在此示例中， transform-style告诉子div的子代继承3D激活。

的CSS

/* styling figure elements */ 
#card figure { 
    display: block; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    margin:0px; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    backface-visibility: hidden; 
}

我们已将backface-visibility属性设置为隐藏，因此该卡不透明且不透明。您也可以尝试将其设置为transparent然后查看效果。

的CSS

#card .front {

    background: url('apple.jpg');

}

#card .back {

    background: url('samsung.jpg');

    -webkit-transform: rotateY( 180deg );

    -moz-transform: rotateY( 180deg );

    -o-transform: rotateY( 180deg );

    transform: rotateY( 180deg );

}

我们使用了两个图像apple.jpg和samsung.jpg作为正面图和背面图的背景。

现在我们几乎已经设置了所有内容，我们需要另一个名为“ flipped”的类并设置transform属性。将使用任何客户端脚本在客户端上动态设置此类。在这种情况下，我使用了jQuery。 “翻转”类样式设置如下：

的CSS

#card.flipped { 
    -webkit-transform: rotateY( 180deg ); 
    -moz-transform: rotateY( 180deg ); 
    -o-transform: rotateY( 180deg ); 
    transform: rotateY( 180deg ); 
}

要运行动画，请添加一个额外的HTML链接标记或按钮，并按如下所示设置click事件：

jQuery代码

$(document).ready(function(){ 
    $("a").click(function(){ 
        $("#card").toggleClass("flipped"); 
    }); 
});

如您所见，我们使用了链接的click属性，并设置了一个callback函数。该功能的任务是将卡div的类别切换为“翻转”。

恭喜！您已经制作了卡片翻转动画。转到浏览器并查看动画。那不是那么容易吗？ :)

现场演示

2）3D旋转立方体

现在让我们尝试一些更复杂的事情。这次，我们将有六个面孔，而不是只有两个。我们将样式化每个面孔，将它们设置为正确的方向，最后进行动画处理。立方体的每个面都将显示面号。

的HTML

<section class="container"> 
    <div id="cube"> 
        <figure>1</figure> 
        <figure>2</figure> 
        <figure>3</figure> 
        <figure>4</figure> 
        <figure>5</figure> 
        <figure>6</figure> 
    </div> 
</section> 
<a href=”#”>Rotate it!</a>

现在，我们有了多维数据集的基本HTML结构。主div “多维数据集”的每个侧面都有六个子“图”元素。让我们开始设计它们的样式。

的CSS

/* First the container styles */ 
.container { 
    width: 200px; 
    height: 200px; 
    position: relative; 
    -webkit-perspective: 1000px; 
    -moz-perspective: 1000px; 
    -o-perspective: 1000px; 
    perspective: 1000px; 
    margin: 0 auto 40px; 
    border: 1px solid #CCC; 
}

标记我们已经使用perspective属性激活了3D空间。

的CSS

#cube { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transform: translateZ( -100px ); 
    -moz-transform: translateZ( -100px ); 
    -o-transform: translateZ( -100px ); 
    transform: translateZ( -100px ); 
    -webkit-transition: -webkit-transform 0.5s; 
    -moz-transition: -moz-transform 0.5s; 
    -o-transition: -o-transform 0.5s; 
    transition: transform 0.5s; 
}

对于多维数据集，我们使用了与卡片翻转示例中相同的preserve-3d来转换属性。在此示例中，我们要做的另一件事是在z方向上平移整个立方体-100px。在本示例的稍后部分，我们将看到，z方向上100px的多维数据集的正面始终向前平移100px。因此，为了使文本显得朦胧，我们将整个立方体移动了-100px。

的CSS

#cube figure { 
    width: 196px; 
    height: 196px; 
    display: block; 
    position: absolute; 
    border: 2px solid black; 
    line-height: 196px; 
    font-size: 120px; 
    font-weight: bold; 
    color: white; 
    text-align: center; 
    margin:0px; 
}

以上样式将设置每侧的通用CSS。它们的尺寸应为正方形，并具有2px的黑色边框。

的CSS

/* Applying a unique color to each face */ 
#cube .front  { background: hsla(   0, 100%, 50%, 0.7 ); } 
#cube .back   { background: hsla(  60, 100%, 50%, 0.7 ); } 
#cube .right  { background: hsla( 120, 100%, 50%, 0.7 ); } 
#cube .left   { background: hsla( 180, 100%, 50%, 0.7 ); } 
#cube .top    { background: hsla( 240, 100%, 50%, 0.7 ); } 
#cube .bottom { background: hsla( 300, 100%, 50%, 0.7 ); }

的CSS

/* Giving the desired orientation to each side of the cube */ 
#cube .front  { 
    -webkit-transform: rotateY(   0deg ) translateZ( 100px ); 
    -moz-transform: rotateY(   0deg ) translateZ( 100px ); 
    -o-transform: rotateY(   0deg ) translateZ( 100px ); 
    transform: rotateY(   0deg ) translateZ( 100px );
} 
#cube .back   { 
    -webkit-transform: rotateX( 180deg ) translateZ( 100px ); 
    -moz-transform: rotateX( 180deg ) translateZ( 100px ); 
    -o-transform: rotateX( 180deg ) translateZ( 100px ); 
    transform: rotateX( 180deg ) translateZ( 100px );
} 
#cube .right  { 
    -webkit-transform: rotateY(  90deg ) translateZ( 100px ); 
    -moz-transform: rotateY(  90deg ) translateZ( 100px ); 
    -o-transform: rotateY(  90deg ) translateZ( 100px ); 
    transform: rotateY(  90deg ) translateZ( 100px ); 
} 
#cube .left   { 
    -webkit-transform: rotateY( -90deg ) translateZ( 100px ); 
    -moz-transform: rotateY( -90deg ) translateZ( 100px ); 
    -o-transform: rotateY( -90deg ) translateZ( 100px ); 
    transform: rotateY( -90deg ) translateZ( 100px ); 
} 
#cube .top    { 
    -webkit-transform: rotateX(  90deg ) translateZ( 100px ); 
    -moz-transform: rotateX(  90deg ) translateZ( 100px ); 
    -o-transform: rotateX(  90deg ) translateZ( 100px ); 
    transform: rotateX(  90deg ) translateZ( 100px ); 
} 
#cube .bottom { 
    -webkit-transform: rotateX( -90deg ) translateZ( 100px ); 
    -moz-transform: rotateX( -90deg ) translateZ( 100px ); 
    -o-transform: rotateX( -90deg ) translateZ( 100px ); 
    transform: rotateX( -90deg ) translateZ( 100px ); 
}

现在，我们准备好了3D不可旋转立方体。最后，我们必须为每边编写过渡样式，这将通过使用jQuery动态应用正确的类来实现。

的CSS

#cube.show-front  { 
    -webkit-transform: translateZ( -100px ) rotateY(    0deg ); 
    -moz-transform: translateZ( -100px ) rotateY(    0deg ); 
    -o-transform: translateZ( -100px ) rotateY(    0deg ); 
    transform: translateZ( -100px ) rotateY(    0deg ); 
} 
#cube.show-back   { 
    -webkit-transform: translateZ( -100px ) rotateX( -180deg ); 
    -moz-transform: translateZ( -100px ) rotateX( -180deg ); 
    -o-transform: translateZ( -100px ) rotateX( -180deg ); 
    transform: translateZ( -100px ) rotateX( -180deg ); 
} 
#cube.show-right  { 
    -webkit-transform: translateZ( -100px ) rotateY(  -90deg ); 
    -moz-transform: translateZ( -100px ) rotateY(  -90deg ); 
    -o-transform: translateZ( -100px ) rotateY(  -90deg ); 
    transform: translateZ( -100px ) rotateY(  -90deg ); 
} 
#cube.show-left   { 
    -webkit-transform: translateZ( -100px ) rotateY(   90deg ); 
    -moz-transform: translateZ( -100px ) rotateY(   90deg ); 
    -o-transform: translateZ( -100px ) rotateY(   90deg ); 
    transform: translateZ( -100px ) rotateY(   90deg ); 
} 
#cube.show-top    { 
    -webkit-transform: translateZ( -100px ) rotateX(  -90deg ); 
    -moz-transform: translateZ( -100px ) rotateX(  -90deg ); 
    -o-transform: translateZ( -100px ) rotateX(  -90deg ); 
    transform: translateZ( -100px ) rotateX(  -90deg ); 
} 
#cube.show-bottom { 
    -webkit-transform: translateZ( -100px ) rotateX(   90deg ); 
    -moz-transform: translateZ( -100px ) rotateX(   90deg ); 
    -o-transform: translateZ( -100px ) rotateX(   90deg ); 
    transform: translateZ( -100px ) rotateX(   90deg ); 
}

最后，我们准备使用jQuery编写回调函数。一旦“旋转！”就会触发回调链接被单击。

jQuery的

$(document).ready(function(){ 
    var ctr=0; 
    var panel=""; 
        $("a").click(function(){ 
            ctr++; 
            if(ctr==1){ 
                $("#cube").toggleClass("show-back"); 
                $("#cube").removeClass(panel); 
                panel="show-back"; 
            } 
            if(ctr==2){ 
                $("#cube").toggleClass("show-right"); 
                $("#cube").removeClass(panel); 
                panel="show-right"; 
            } 
            if(ctr==3){ 
                $("#cube").toggleClass("show-left"); 
                $("#cube").removeClass(panel); 
                panel="show-left";
            } 
            if(ctr==4){ 
                $("#cube").toggleClass("show-top"); 
                $("#cube").removeClass(panel); panel="show-top"; 
            } 
            if(ctr==5){ 
                $("#cube").toggleClass("show-bottom"); 
                $("#cube").removeClass(panel); 
                panel="show-bottom"; 
            } 
            if(ctr==6){ 
                $("#cube").toggleClass("show-front"); 
                $("#cube").removeClass(panel); 
                panel="show-front"; ctr=0; 
            } 
        }); 
});

现场演示

恭喜！您也已经通过此演示完成了！希望您了解CSS3转换是什么，以及我们如何在我们的网站中使用它来制作动画。

CSS3 3D转换的其他一些可能的实现方式可能是滑块，图像轮播，动画相册（例如Google+相册）等。

如果您喜欢阅读这篇文章，那么您会喜欢Learnable的； 向大师学习新鲜技能的地方。 会员可以立即访问所有SitePoint的电子书和交互式在线课程，例如针对真实世界的HTML5和CSS3 。

本文的评论已关闭。 对CSS有疑问吗？ 为什么不在我们的论坛上提问呢？

From: https://www.sitepoint.com/advanced-css3-2d-and-3d-transform-techniques/

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
先进的CSS3 2D和3D转换技术

飘是使用Flash和GIF图像，用于创建动画图形的日子。现在是时候来炫耀一些最好的CSS3功能。 CSS3转换一直存在在网络相当长的一段时间。像Mozilla浏览器，谷歌Chrome和Opera也完全支持CSS3 2D和3D变换技术。在本文中，您将了解到： CSS3 2D变换技术 CSS3 3D变换技术什么是视角？和许多不同的变换功能我也准备了演示中，我会告诉你如何做...
复制链接

扫一扫