本文详细介绍了CSS3中的2D和3D转换，包括移动、旋转、缩放等2D转换功能，以及3D转换中的translate3d、rotate3d、透视和3D呈现等概念，通过实例展示了如何实现盒子居中、图片放大、3D导航栏等效果。
2D转换
PASS：因为图片太色，所以。。。自行脑补吧各位~~~
转换（transform）是CSS中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
- 移动：translate
- 旋转：rotate
- 缩放：scale
移动translate
2D移动是2D转换里面的一种功能，可以改变元素再在页面中的位置，类似定位
语法
transform:translate(x,y);或者分开写
transform:translateX(n);
transform:translateY(n);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 移动盒子的位置：定位 盒子外边距 2D转换移动 */
div {
width: 200px;
height: 200px;
background-color: pink;
/* x就是x轴上移动位置，y就是y轴上移动位置 中间用逗号分隔 */
/* transform:translate(x,y); */
/* transform: translate(100px, 100px); */
/* 1.如果只移动x坐标 */
/* transform: translate(100px, 0); */
transform: translateX(100px);
/* 2.如果只移动y坐标 */
/* transform: translate(100px, 0); */
transform: translateY(100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
重点：
- 定义2D转换中的移动，沿着x和y轴移动元素
- translate最大的优点：不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate(50%,50%);
- 对行内标签没有效果
让盒子水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 500px;
height: 500px;
background-color: pink;
/* 1.我们translate里面的参数可以是用% */
/* 2.如果里面的参数是%，移动的距离是盒子自身的宽度或者高度来对比的 */
/* 这里50%就是100px，因为盒子的宽度是200px */
transform: translate(50%);
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: purple;
/* translate(-50%, -50%) 盒子往上走自己高度的一半 */
transform: translate(-50%, -50%);
}
span {
/* translate 对于行内元素是无效的 */
transform: translate(300px, 300px);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<span>123</span>
</body>
</html>
旋转rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
语法
transform:rotate(度数)
重点：
- rotate里面跟度数，单位是deg 比如 rotate（45deg）
- 角度为正时，顺时针，负时，为逆时针
- 默认旋转的中心点时元素的中心点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img {
width: 150px;
/* 顺时针旋转18度 */
transform: rotate(18deg);
border-radius: 50%;
border: 5px solid pink;
/* 过渡写到本身上，谁做动画给谁加 */
transition: all; 0.3s;
}
img:hover {
transform: rotate(90deg);
}
</style>
</head>
<body>
<img src="../img/2D娑娜.gif" >
</body>
</html>
转换中心点transform-origin
我们可以设置元素转换的中心点
语法
transform-origin:x y;
重点
- 注意后面的参数x和y用空格隔开
- xy默认转换的中心点时元素的中心点（50% 50%）
- 还可以给xy设置像素或者方位名词（top bottom left right center）
旋转中心点案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
}
div::before {
content: "阿波";
display: block;
width: 100%;
height: 100%;
background-color: hotpink;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all 0.4s;
}
/* 鼠标经过div，里面before 复原 */
div:hover::before {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
缩放scale
缩放，顾名思义，可以放大和缩小，只要给元素添加上了这个属性就能控制它放大还是缩小
语法
transform:scale(x,y);
注意：
- 注意其中x和y用逗号分隔
- transform：scale（1，1）：宽和高都放大一倍，相对于没有放大
- transform：scale（2，2）：宽和高都放大了2倍
- transform：scale（2）：只写一个参数，第二个参数和第一个参数一样，相当于scale（2，2）
- transform（0.5，0.5）：缩小
- scale缩放最大的优势：可以设置旋转中心点缩放，默认以中心点缩放的，而且不影响其他盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
div:hover {
/* 1.里面写的数字不跟单位，就是倍数的意思，1就是1的倍数，2就是2的倍数 */
/* transform: scale(x,y); */
transform: scale(2,2);
/* 2.修改了宽度为原来的2倍，高度不变 */
/* transform: scale(2,1); */
/* 3.等比例缩放，同时修改宽度和高度，我们有简单的写法，以下是宽度修改了2倍，高度默认和第一个参数一样 */
/* transform: scale(2); */
/* 4.我们可以进行缩小，小于1就是缩放 */
/* transform: scale(0.5,0.5); */
/* transform: scale(0.5); */
/* 5.scale的优势之处：不会影响其他的盒子，而且可以设置缩放的中心点 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
图片放大案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片放大案例</title>
<style type="text/css">
div {
overflow: hidden;
float: left;
margin: 10px;
}
div img {
transition: all 0.4s;
vertical-align: middle;
}
div img:hover {
transform: scale(4,4);
}
</style>
</head>
<body>
<div>
<a href="#"><img src="../img/缩放娑娜.png" ></a>
</div>
<div>
<a href="#"><img src="../img/缩放娑娜.png" ></a>
</div>
<div>
<a href="#"><img src="../img/缩放娑娜.png" ></a>
</div>
</body>
</html>
鼠标移入效果
分页按钮案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li {
float: left;
width: 30px;
height: 30px;
border: 1px solid pink;
margin: 10px;
text-align: center;
line-height: 30px;
list-style: none;
border-radius: 50%;
cursor: pointer;
transition: all .4s;
}
li:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
2D转换综合写法
注意：
- 同时使用多个转换，其格式为：transform：translate（） rotate（） scale（）…等
- 其顺序会影响转换的效果（先旋转会改变坐标轴方向）
- 当我们同时有位移和其他属性的时候，记得要将位移放到最前
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all .5s;
}
div:hover {
transform: translate(150px,150px) rotate(180deg);
/* 这俩是效果不一样 */
/* transform: rotate(180deg) translate(150px,150px); */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS3动画
制作动画分为两步：
- 先定义动画
- 再使用（调用）动画
动画的基本使用
用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称 {
0% {
width:100px;
}
100% {
width:200px;
}
}
元素使用动画
div {
width:200px;
height:200px;
background-color:aqua;
margin:100px auto;
/* 调用动画 */
animation-name:动画名称;
/* 持续时间 */
animation-duration:持续时间;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 想页面一打开,一个盒子就从左边走到右边 */
/* 1.定义动画 */
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2.调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
动画序列
- 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
- 在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果
- 动画是使元素从一种样式逐渐变化位另一种样式的效果，您可以改变任意多的样式任意多的次数
- 请用百分比来规定变化发生时间，或用关键词“form”和“to”，等同于0%和100%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画序列</title>
<style type="text/css">
/* @keyframes move{
from {
transform: translate(0,0);
}
to {
transform: translate(1000px,0);
}
} */
/* 盒子环绕一圈 */
/* 动画序列 */
/* 1.可以做多个状态的变化 keyframes:关键帧 */
/* 2.里面的百分比要是整数 */
/* 3.里面的百分比就是总的时间(这个案例10s)的划分 */
@keyframes move{
0% {
transform: translate(0,0);
}
25% {
transform: translate(1000px,0);
}
50% {
transform: translate(1000px,500px);
}
75% {
transform: translate(0,500px);
}
100% {
transform: translate(0,0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
animation-name: move;
animation-duration: 10s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
动画常用属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性 |
| animation-name | 规定@keyframes动画的名称（必须） |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0（必须的） |
| animation-timing-function | 规定动画的速度曲线，默认是“ease” |
| animation-delay | 规定动画何时开始，默认是0 |
| animation-iteration-count | 规定动画被播放的次数，默认是1，还有infinite |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是“normal”，alternate逆播放 |
| animation-play-state | 规定动画是否正在运行或暂停，默认是“running”，还有“pause” |
| animation-fill-mode | 规定动画结束后状态，保持forwards回到起始backwards |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画属性</title>
<style type="text/css">
@keyframes move {
0% {
transform: translate(0,0);
}
100% {
transform: translate(1000px,0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
animation-name: move;
animation-duration: 2s;
/* 运动曲线 */
/* animation-timing-function: ease; */
/* 何时开始 */
animation-delay: 1s;
/* 重复次数 iteration 重复的，count 次数，infinite 无限 */
/* animation-iteration-count: infinite; */
/* 是否反方向播放，默认是normal 如果想要反方向就写alternate */
/* animation-direction: alternate; */
/* 动画结束后的状态，默认是backwards回到起始状态，可以改成让它停留在结束状态forwards */
animation-fill-mode: forwards;
}
div:hover {
/* 鼠标经过div让这个div停止动画 */
animation-play-state: paused;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
动画简写属性
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
animation:myfirst 5s linear 2s infinite alternate;
<!-- 上述代码简写 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画属性</title>
<style type="text/css">
@keyframes move {
0% {
transform: translate(0,0);
}
100% {
transform: translate(1000px,0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
animation-name: move;
animation-duration: 2s;
/* 简写 */
/* 前面两个属性name、duration一定要写 */
animation: move 2s linear 0s 1 alternate forwards;
}
div:hover {
/* 鼠标经过div让这个div停止动画 */
animation-play-state: paused;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
注意：
- 简写属性里面不包含animation-play-state
- 暂停动画animation-play-state：pause;经常和鼠标经过等其他配合使用
- 想要动画走回来，而不是直接跳回来：animation-direction：alternate
- 盒子动画结束后，停在结束位置：animation-fill-mode：forwards
速度曲线之steps
animation-timing-function：规定动画的速度曲线，默认是“ease”
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的，匀速 |
| ease | 默认，动画从低速开始，然后加快，在结束前变慢 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| steps（） | 指定了时间函数中的间隔数量（步长） |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>steps步长</title>
<style type="text/css">
div {
font-size: 20px;
width: 0;
height: 30px;
background-color: pink;
/* 强制文字一行内显示 */
white-space: nowrap;
/* steps就是分几步来完成我们的动画，有了steps就不要再写ease或者linear了 */
animation: w 4s steps(10) forwards;
}
@keyframes w {
0% {
width: 0;
}
100% {
width: 200px;
}
}
</style>
</head>
<body>
<div>最爱琴女E，琴女36D</div>
</body>
</html>
效果
图片移动例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 盒子移动到中间并且图片一直来回移动 -->
<style type="text/css">
body {
background-color: gold;
}
div {
position: absolute;
text-align: center;
width: 309px;
height: 405px;
background: url(../img/臀.jpg) no-repeat;
/* 可以添加多个动画，用逗号隔开 */
animation: a 5s steps(7) infinite alternate,move 3s forwards;
}
@keyframes a {
from {
background-position: 0 0;
}
to {
background-position: -2160px 0;
}
}
@keyframes move {
from {
left: 0;
}
to {
left: 50%;
/* margin-left: -100px; */
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3D转换
三维坐标系
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的
- x轴：水平向右 注意：x右边是正值，左边是负值
- y轴：垂直向下 注意：y下面是正值，上面是负值
- z轴：垂直屏幕 注意：往外面是正值，往里面是负值
主要知识点
- 3D位移：translate3d（x，y，z）
- 3D旋转：rotate3d（x，y，z）
- 透视：perspective
- 3D呈现transform-style
3D移动translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向
- transform：translateX（100px）：仅仅是在x轴上移动
- transform：translateY（100px）：仅仅是在y轴上移动
- transform：translateZ（100px）：仅仅是在z轴上移动（注意：translateZ一般用px单位）
- transform：translate3d（x，y，z）：其中x、y、z分别指要移动的轴的方向的距离
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
/* transform: translateX(100px); */
/* transform: translateY(100px); */
/* transform: translateX(100px) translateY(100px) translateZ(100px); */
/* 1.translateZ沿着z轴移动 */
/* 2.translateZ后面的单位我们一般跟着px */
/* 3.translateZ(100px)向外移动100px （向我们的眼睛来移动的） */
/* 4.3D移动有简写的方法 */
/* transform: translate3d(x,y,z); */
/* transform: translate3d(100px,100px,100px); */
/* 5.xyz是不能省略的，如果没有就写0 */
transform: translate3d(0,100px,100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
透视perspective
在2D平面产生近大远小视觉立体，但是只是效果二维的
- 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
- 模拟人类的视觉位置，可认为安排一只眼睛去看
- 透视我们也称为视距：视距就是人们的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大，越远成像越小
- 透视的单位是像素
透视写在被观察元素的父盒子上面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
/* 透视写到被观察元素的父盒子上面 */
perspective: 500px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
transform: translate3d(400px,100px,100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
translateZ
translateZ（100px）：仅仅是在Z轴上移动，有了透视，就能看到translateZ引起的变化了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
perspective: 500px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transform: translateZ(0);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
3D转换rotate3d
3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转
语法
transform:rotateX(45deg)：沿着x轴正方向旋转45度
transform:rotateY(45deg)：沿着y轴正方向旋转45度
transform:rotateZ(45deg)：沿着z轴正方向旋转45度
transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转，deg为角度（了解即可）
rotateX
左手准则
- 左手的拇指指向x轴的正方向
- 其余手指的弯曲方向就是该元素沿着x轴旋转的方向
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
perspective: 300px;
}
img {
display: block;
width: 500px;
height: 400px;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateX(360deg);
}
</style>
</head>
<body>
<img src="../img/3D旋转x.jpg" >
</body>
</html>
rotateY
左手准则
- 左手的拇指指向y轴的正方向
- 其余手指的弯曲方向就是该元素沿着y轴旋转的方向（正值）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
perspective: 500px;
}
img {
display: block;
width: 500px;
height: 400px;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<img src="../img/3D旋转x.jpg" >
</body>
</html>
rotateZ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
perspective: 500px;
}
img {
display: block;
width: 500px;
height: 400px;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateZ(180deg);
}
</style>
</head>
<body>
<img src="../img/3D旋转x.jpg" >
</body>
</html>
rotate3d
transform:rotate3d（x，y，z，deg）：沿着自定义轴旋转deg为角度（了解即可）
xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度
- transform：rotate3d（1，0，0，45deg）就是沿着x轴旋转45deg
- transform：rotate3d（1，1，0，45deg）就是沿着对角线旋转45deg
3D呈现transform-style
- 控制子元素是否开启三维立体环境
- transform-style：flat子元素不开启3d立体空间 默认的
- transform-style：preserve-3d；子元素开启立体空间
- 代码写给父级，但是影响的是子盒子
- 这个属性很重要，后面比用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 让子元素保持3d立体空间环境 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(-60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>
两面盒子翻转例子
实现步骤
搭建HTML结构
<div class="box">
<div class="front">XXXXX</div>
<div class="back">XXXXX</div>
</div>
- box父盒子里面包含前后两个子盒子
- box是翻转的盒子front是前面盒子back是后面盒子
CSS样式
- box指定大小，切记要添加3d呈现
- back盒子要沿着y轴翻转180度
- 最后鼠标经过box沿着y旋转180deg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
perspective: 350px;
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all .4s;
/* 让背面的紫色盒子保留立体空间 给父级添加的 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 300px;
}
.front {
background-color: pink;
z-index: 1;
}
.back {
background-color: purple;
/* 像手机一样 背靠背 旋转 */
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">WDNMD</div>
<div class="back">我叼你喵的</div>
</div>
</body>
</html>
3D导航栏例子
1.搭建HTML结构
<ul>
<li>
<div class="box">
<div class="front">XXXXX</div>
<div class="bottom">XXXXX</div>
</div>
</li>
</ul>
- li做导航栏的
- box是翻转的盒子 front是前面盒子 bottom是底下盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
}
ul li {
float: left;
margin: 0 5px;
width: 120px;
height: 35px;
list-style: none;
/* 一会需要给box旋转，也需要透视 干脆给li加 里面的子盒子都有透视效果 */
perspective: 500px;
}
.box {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1s;
font-weight: 700;
font-size: 14px;
text-align: center;
line-height: 35px;
}
.box:hover {
transform: rotateX(90deg);
}
.front,
.bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.front {
background-color: lightgreen;
z-index: 1;
transform: translateZ(17.5px);
}
.bottom {
background-color: darkorange;
/* 如果有移动或者其样式，必须先写移动 */
transform: translateY(17.5px) rotateX(-90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">首页</div>
<div class="bottom">首页</div>
</div>
</li>
<li>
<div class="box">
<div class="front">资讯</div>
<div class="bottom">资讯</div>
</div>
</li>
<li>
<div class="box">
<div class="front">视频</div>
<div class="bottom">视频</div>
</div>
</li>
<li>
<div class="box">
<div class="front">图库</div>
<div class="bottom">图库</div>
</div>
</li>
<li>
<div class="box">
<div class="front">关于我们</div>
<div class="bottom">关于我们</div>
</div>
</li>
</ul>
</body>
</html>
旋转木马案例
搭建HTML结构
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
perspective: 1000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 178px auto;
transform-style: preserve-3d;
/* 添加动画效果 */
animation: rotate 10s linear infinite;
background: url(../img/剑姬.jpg);
}
section:hover {
/* 鼠标放入section停止动画 */
animation-play-state: paused;
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section div:nth-child(1) {
/* 先旋转好了再移动距离 */
transform: translateZ(300px);
background: url(../img/sona1.png); no-repeat;
}
section div:nth-child(2) {
transform: rotateY(60deg) translateZ(300px);
background: url(../img/莎拉1.jpg);
}
section div:nth-child(3) {
transform: rotateY(120deg) translateZ(300px);
background: url(../img/sona2.png);
}
section div:nth-child(4) {
transform: rotateY(180deg) translateZ(300px);
background: url(../img/阿卡丽.jpg);
}
section div:nth-child(5) {
transform: rotateY(240deg) translateZ(300px);
background: url(../img/sona3.png);
}
section div:nth-child(6) {
transform: rotateY(300deg) translateZ(300px);
background: url(../img/莎拉2.jpg);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
1.私有前缀
- -moz-：代表Firefox浏览器私有属性
- -ms-：代表IE浏览器私有属性
- -webkit-：代表safari、chrome私有属性
- -o-：代表Opera私有属性
2.提倡的写法
-moz-border-radius:10px;
-webkit-border-radius:10px
-o-border-radius:10px;
border-radius:10px;
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
