这篇文章来学习下关于CSS变量（CSS Variables）这个还在开发中的新的API，简单来了解下它的概念和一些用途。
使用CSS变量（CSS Variables）这个特性来完成下图所示的一个3D旋转的功能。
CSS变量概念以及用法
CSS变量（CSS Variables）是由网页的作者或用户定义的实体，用来指定文档中的特定变量。使用自定义属性来设置变量名，并使用特定的 var() 来访问。（比如 color:var(--main-color);）。
基本用法
声明一个变量：
element {
--main-bg-color: brown;
}
使用变量：
element {
background-color: var(--main-bg-color);
}
非常简单，如果使用过诸如SASS、LESS等预编译CSS语言，对这种使用变量的方法再熟悉不过了。
了解了CSS变量（CSS Variables）的一些基本知识，下面来使用它来实现上面图中所示的3D旋转功能。
CSS变量（CSS Variables）实战
首先准备图片的结构：
<img src="dasha.jpg" srcset="dasha-2x.jpg 2x" alt>
使用flexbox来实现图片居中：
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
perspective: 60vw;
margin: 0;
--mouseX: 0deg;
--mouseY: 0deg;
}
由于图片要根据用户鼠标的坐标来实现3D旋转的效果，这里就可以借助于CSS变量（CSS Variables）这个方法来实现：
img {
width: 80vmin;
height: 80vmin;
transform: rotateX(calc(var(--mouseY)))
rotateY(calc(var(--mouseX)));
}
如上代码所示，定义了两个变量--mouseY和mouseX来实时获取transform的值。
实时获取位置的值
先来获取图片并定义在img变量里：
const img = document.getElementsByTagName("img")[0];
由于CSS变量（CSS Variables）是可以定义在样式中的，所以也可以使用javascript中的setProperty方法来设置样式的值。所以我们通过实时获取鼠标在屏幕上的位置通过计算得到鼠标在图片上面的具体位置的值然后来确定图片旋转的角度。
function sway(xPos, yPos) {
let wh = window.innerHeight / 2,
ww = window.innerWidth / 2;
document.body.style.setProperty("--mouseX", (xPos - ww) / 25+"deg");
document.body.style.setProperty("--mouseY", (yPos - wh) / 25+"deg");
}
然后通过监听鼠标移动或者是移动端上手机触摸的事件来调用sway方法，就可以实时根据鼠标或者是手指的位置来更新图片旋转角度的值，从而实现图片3D旋转的功能。
document.addEventListener("mousemove", function(e) {
sway(e.clientX,e.clientY);
})
document.addEventListener("touchmove", function(e) {
e.preventDefault();
var touch = e.targetTouches[0];
if (touch) {
sway(touch.pageX, touch.pageY);
}
})
如果要兼容IE或者是MS Edge浏览器，要单独来写一行javascript代码：
function sway(xPos, yPos) {
img.style.transform = "rotateX("+(yPos - wh) / 25+"deg) rotateY("+(xPos - ww) / 25 +"deg)";
}
本文主要是根据Free-Rotate an Element in 3D Space with CSS Variables这篇文章整理而成，补充了一些CSS变量（CSS Variables）的基本知识，有疏漏或者理解不到位的地方，还请多多指教！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
perspective: 600px;
margin: 0;
}
img {
width: 80vmin;
height: 80vmin;
}
</style>
</head>
<body>
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<img src="" alt>
</body>
<script type="text/javascript">
let wh = window.innerHeight / 2,
ww = window.innerWidth / 2,
img = document.getElementsByTagName("img")[0];
function sway(xPos, yPos) {
img.style.transform = "rotateX(" + (yPos - wh) / 25 + "deg) rotateY(" + (xPos - ww) / 25 + "deg)";
}
document.addEventListener("mousemove", function(e) {
sway(e.clientX, e.clientY);
})
document.addEventListener("touchmove", function(e) {
e.preventDefault();
var touch = e.targetTouches[0];
if(touch) {
sway(touch.pageX, touch.pageY);
}
});
</script>
</html>
