This article will take a look at the new API CSS Variables, which is still under development, briefly to understand its concepts and some of its uses.

Use CSS Variables to perform a 3D rotation as shown below.

CSS variable concepts and usage

CSS Variables are entities defined by the author or user of a web page that specify specific Variables in a document. Use custom properties to set variable names and use a specific var() to access them. Var (–main-color); .

Basic usage

Declare a variable:

element {
  --main-bg-color: brown;
}
Copy the code

Use variables:

element {
  background-color: var(--main-bg-color);
}
Copy the code

This approach to using variables is very simple and familiar to anyone who has used precompiled CSS languages such as SASS and LESS.

Now that you know the basics of CSS Variables, let’s use them to implement the 3D rotation function shown in the figure above.

CSS Variables

First prepare the structure of the picture:

<img src="dasha.jpg" srcset="dasha-2x.jpg 2x" alt>
Copy the code

Use Flexbox to center the image:

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 60vw;
  margin: 0;
  --mouseX: 0deg;
  --mouseY: 0deg;
}
Copy the code

Since the image needs to be 3D rotated according to the user’s mouse coordinates, CSS Variables can be used to achieve the effect:

img {
  width: 80vmin;
  height: 80vmin;
  transform: rotateX(calc(var(--mouseY)))
    rotateY(calc(var(--mouseX)));
}
Copy the code

As shown in the code above, two variables, mouseY and mouseX, are defined to get the value of the transform in real time.

Get the value of the location in real time

Get the image and define it in the img variable:

const img = document.getElementsByTagName("img")[0];
Copy the code

Since CSS Variables can be defined in styles, you can also use the setProperty method in javascript to set the values of styles. So what we do is we take the mouse’s position on the screen in real time and we calculate the value of the mouse’s position on the image and then we determine the rotation Angle of the image.

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");
}
Copy the code

Then call the sway method by monitoring the mouse movement or the event of the touch of the phone on the mobile terminal to update the value of the picture rotation Angle in real time according to the position of the mouse or finger, so as to realize the 3D picture rotation function.

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); }})Copy the code

To be compatible with IE or MS Edge browsers, write a separate line of javascript code:

function sway(xPos, yPos) {
  img.style.transform = "rotateX("+(yPos - wh) / 25+"deg) rotateY("+(xPos - ww) / 25 +"deg)";
}
Copy the code

The demo address

This article is mainly based on the article free-rotate an Element in 3D Space with CSS Variables, and supplements some basic knowledge of CSS Variables. There are omisations or not enough understanding. Please give me more advice!

References:

Using CSS variables