JavaScript 获取css transform信息

要获取元素的 CSS transform 信息，可以使用 JavaScript 中的 getComputedStyle 方法。这个方法返回表示指定元素所有计算后样式属性的对象。

下面是一个示例代码：

// 获取元素
var element = document.getElementById('your-element');

// 获取计算后的样式
var computedStyle = window.getComputedStyle(element);

// 获取 transform 属性的值
var transformValue = computedStyle.transform || computedStyle.webkitTransform;

在上面的代码中，`element` 是要获取 transform 信息的 HTML 元素。`computedStyle` 是通过调用 `getComputedStyle` 方法得到的表示计算后样式属性的对象。然后，你可以使用 `transform` 或 `webkitTransform` 属性从 `computedStyle` 对象中获取 transform 属性的值。

需要注意的是，transform 的值是一个矩阵（matrix）或者一个矩阵函数（如 translate、rotate、scale 等）的组合。你可以进一步解析这些值以获取具体的转换信息。

相关问题

css transform监听消失

要监听 CSS transform 的消失，你可以使用 CSS 动画的事件监听器来实现。具体步骤如下：

1. 首先，在 CSS 中定义你的 transform 动画效果，并将其应用于需要监听的元素。例如，你可以使用 `transition` 属性来实现动画效果：

.element {
  transition: transform 0.3s ease;
}

2. 接下来，在 JavaScript 中获取该元素的样式，并使用 setInterval() 方法来检测其 transform 属性是否发生变化。例如：

const element = document.querySelector('.element');
let prevTransform = getComputedStyle(element).transform;

setInterval(() => {
  const currentTransform = getComputedStyle(element).transform;
  if (prevTransform !== currentTransform) {
    // transform 属性发生变化，执行相应的操作
    console.log('Transform changed!');
    // 这里可以添加你想要执行的代码
  }
  prevTransform = currentTransform;
}, 100);

在上述代码中，我们使用了 setInterval() 方法来每隔100毫秒检查一次 transform 属性是否发生变化。如果检测到变化，则执行相应的操作。

请注意，这种方法只能检测到元素的 transform 属性是否发生变化，而无法获取具体的变化值。如果你需要获取更详细的信息，可能需要使用更复杂的解决方案，比如 MutationObserver。

css transform实现翻书

可以使用CSS的transform属性来实现翻书的效果。具体步骤如下：

1. 创建HTML结构，包含两个块级元素，一个代表书的封面，一个代表书的内页。例如：

<div class="book">
  <div class="cover"></div>
  <div class="page"></div>
</div>

2. 使用CSS设置书的尺寸、背景等样式，并为书的内页设置默认旋转角度和过渡效果。例如：

.book {
  position: relative;
  width: 200px;
  height: 300px;
}

.cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: perspective(1000px) rotateY(0deg);
  transition: transform 0.5s;
}

3. 使用JavaScript监听鼠标点击或触摸事件，根据用户操作改变内页的旋转角度。例如：

const book = document.querySelector('.book');
const page = document.querySelector('.page');

book.addEventListener('click', function() {
  page.style.transform = 'perspective(1000px) rotateY(-180deg)';
});

这样，当用户点击书的封面时，书的内页会产生旋转动画，实现翻书的效果。你可以根据实际需求调整代码和样式来满足你的要求。