前言
三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功能类似。3D变形与2D变形的最大不同就在于其参考的坐标轴不同,2D变形的坐标轴是平面的,只存在X轴和Y轴,而3D变形的坐标轴则是X、Y、Z三条轴组成的立体空间,X轴正向是朝右,Y周正向是朝下,Z轴正向是朝屏幕外。
静态效果图如下:
实例代码
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html;charset=UTF-8"
><
meta
charset
=
"utf-8"
><
meta
name
=
"apple-mobile-web-app-capable"
content
=
"yes"
><
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
><
title
>CSS3三维变形</
title
>
<!-- -->
<
style
type
=
"text/css"
>
* {
margin: 0;
padding: 0;
}
.box {
position:relative;
top: 100px;
width:300px;
height: 300px;
margin: 0 auto;
background-color: #ccc;
/*
透视效果
越大透视距离越平面,反之亦然
*/
perspective:800px;
}
.content {
/*3d视图*/
transform-style: preserve-3d;
/*过度动画*/
transition: all 3s linear;
width:200px;
height: 200px;
position: absolute;
top: 50px;
left: 50px;
}
/*
经过顺时针旋转
*/
.content:hover {
transform: rotateX(180deg) rotateY(180deg);
}
/*
方块公共样式
*/
.side {
position: absolute;
height: 200px;
width: 200px;
border: 2px solid #000;
background: rgba(0,0,0,0.3);
color: #fff;
line-height: 200px;
font-size: 30px;
font-weight: bold;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}
/*
前
*/
.side1 {
transform: translateZ(100px);
}
/*
后
*/
.side2 {
transform: rotateX(180deg) translateZ(100px);
}
/*
左
*/
.side3 {
transform: rotateY(-90deg) translateZ(100px);
}
/*
右
*/
.side4 {
transform: rotateY(90deg) translateZ(100px);
}
/*
上
*/
.side5 {
transform: rotateX(90deg) translateZ(100px);
}
/*
下
*/
.side6 {
transform: rotateX(-90deg) translateZ(100px);
}
</
style
>
<!-- begin -->
<
div
class
=
"box"
>
<
div
class
=
"content"
>
<
div
class
=
"side side1"
>1</
div
>
<
div
class
=
"side side2"
>2</
div
>
<
div
class
=
"side side3"
>3</
div
>
<
div
class
=
"side side4"
>4</
div
>
<
div
class
=
"side side5"
>5</
div
>
<
div
class
=
"side side6"
>6</
div
>
</
div
>
</
div
>
<!-- end -->
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。